KB Home \| Advanced Search \| News \| Login \| Glossary \| Ask Question
Knowledge Management Software

Create Glowing, Radioactive Buttons with CSS

Article ID: 153 | Rating: 3.5/5 from 2 votes | Last Updated: Sun, Dec 27, 2009 at 5:30 PM

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.

WOW! How do you do it?

For each button, we specify three things:

Animation name (we'll show this later)
Animation duration
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

http://www.zurb.com/playground/radioactive-buttons