Article Diary - General Knowledge Digest

Create Glowing, Radioactive Buttons with CSS

Create awesome looking and engaging buttons by using CSS animations to give them all that radioactive feel. Using CSS animations in Safari and Google Chrome, we’re able to turn an otherwise ordinary button into a glowing, radioactive mess of awesome. Don’t see the radioactive above? Be sure you’re in Safari or Chrome before getting underway.

Radioactive CSS Buttons

WOW! How do you do it?

For each button, we specify three things:
  1. Animation name (we’ll show this later)
  2. Animation duration
  3. And the number of times it repeats (iteration count)
You can see how these come together on the right. The CSS calls a pre-defined animation you create, assigns it a duration, and tells it how long to repeat. Pretty sweet, right? To make it work, we first specify all our button styles and then we added the shadows. Now, in the animation, we switch from a box-shadow that matches the background color to the color of the button to give it the glowing effect.

Requirements: Safari or Chrome Browser
License: License Free

Online Demo
3.5 (2)
Article Rating (2 Votes)
Rate this article
Attached Files
There are no attachments for this article.
Comments
There are no comments for this article. Be the first to post a comment.
Name
Email
Security Code Security Code
Related Articles RSS Feed
Easy Slider jQuery Plugin - Easy Image or Content Slider
Viewed 1475 times since Tue, Jan 12, 2010
Modify HTTP Headers in PHP with Examples
Viewed 1152 times since Wed, Mar 10, 2010
Search Engine Optimization: Tags of Importance for SEO
Viewed 1049 times since Tue, Oct 12, 2010
Stylish Cross-Browser CSS Buttons - Simply-Buttons v2
Viewed 1093 times since Thu, Nov 12, 2009
Open Source Online Invoice System - siwapp
Viewed 1425 times since Thu, Jan 7, 2010
30 High Quality Charts & Graphs for Web Developers
Viewed 3030 times since Wed, Mar 23, 2011
PHP For Android Project - Interview with Lead Developer
Viewed 1094 times since Mon, Jul 26, 2010
SEO (Search Engine Optimization) vs SEM(Search Engine Marketing)
Viewed 901 times since Mon, Jul 12, 2010
Flash Webcam Image Capture
Viewed 1634 times since Thu, Nov 12, 2009
Free IP to Country, IP to City Database & API
Viewed 1451 times since Thu, Dec 31, 2009