Radioactive Buttons

Create awesome looking and engaging buttons by using CSS animations to give them all that radioactive feel.

Note: Demo works best in Safari 4.x and Chrome and, um, not so much in Firefox 3.5.

This Is How We Do It

Using CSS animations in Safari, 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 before getting underway.

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 (done in our global styles for ZURB.com) 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.

And when we add in the animations, bam! Radioactive buttons.

1. Create Your Animation

@-webkit-keyframes greenPulse {
  from { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; }
  50% { background-color: #91bd09; -webkit-box-shadow: 0 0 18px #91bd09; }
  to { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; }
}

2. And Then Cue It Up

a.green.button {
  -webkit-animation-name: greenPulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
}

Copyright ZURB, freely available for distribution under the MIT license.

Startup playground

Log in with your ZURB ID

Log in with Google

Don't have a ZURB ID? Sign up

Forgot password?
×

Sign up for a ZURB ID

Sign up with Google

Already have a ZURB ID? Log in

×