Antidecaf

CSS3 has given us a number of new tools to make beautiful, responsive and interactive web experiences. Among the improvements are CSS animations, which allow us to animate elements without having to turn to flash or javascript.

Here’s a quick look at how to make a radioactive button like this one (if you’re viewing this page in Safari, Chrome or another webkit browser), using only CSS3 and the necessary markup:

Submit

First, the necessary markup. The styles can of course be applied to any layout element, but for the sake of the example, I’ll make a button using HTML5′s new button element:

<button>Submit</button>

Now, let’s apply some basic styling to the button, to make it look at least halfway decent to begin with.

button {
    font-size:150%;
    padding:10px 20px;
    cursor:pointer;
    text-shadow:#fff 1px 1px 0;
    border:1px solid #aaa;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    background:#92d46a;
    background:-webkit-gradient(
		linear, left top, left bottom,
		from(#92d46a), to(#dcf9ca)
		);
    background:-moz-linear-gradient(
		top, #92d46a, #dcf9ca
		);
    filter:progid:DXImageTransform.Microsoft.gradient(
		startColorstr='#92d46a',
		endColorstr='#dcf9ca'
		);
}

Here’s our basic button. Apart from the usual values, I’ve added a cross browser gradient background, and rounded corners using border-radius.

Now let’s have a look at the animation. Note: This is currently supported only by webkit browsers, i.e. Safari, Chrome and some others. This also goes into the button styling:

    -webkit-animation-name: breathe;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-timing-function: ease;

First, we’re giving our animation a name. I’m calling it breathe, because that’s what the button is supposed to look like it’s doing. Next, I set the duration of the animation to 3s (3 seconds), and the iteration-count to infinite. This makes an animation that lasts for 3 seconds, and repeats itself infinitely. For more about how to animate elements, check out these articles: Using CSS3 Transitions, Transforms and Animation, CSS: Transition Timing Functions.

Now that the button has been assigned to an animation, let’s make the animation itself. I’m using webkit-keyframes to determine what the element should look like at 0%, 50% and 100% into the animation.

@-webkit-keyframes breathe {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
        -webkit-box-shadow:0 0 30px rgba(96, 255, 0, 1);
    }
    50% {
        opacity: 0.7;
        -webkit-transform: scale(0.9);
        -webkit-box-shadow:0 0 5px rgba(96, 255, 0, 0.5);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -webkit-box-shadow:0 0 30px rgba(96, 255, 0, 1);
    }
}

At 0%, the button is basically what it was before, with the exception of a box-shadow. I’ve added a green, toxic looking box-shadow using rgba to be able to alter the opacity of it. At 50%, the box-shadow has 50% opacity. The blur size has been reduced from 30px to 5px, making the shadow look as if it breathes. To make to button itself breathe, I’ve reduced it’s size to 90% of itself using transform: scale. At 100%, all properties are the same as at 0%, giving the animation a smooth rythm.

Finally, I’ll add something to the buttons hover state to make it feel more responsive.

button:hover {
    color:#236baf;
    background:#92d46a;
    background:-webkit-gradient(
		linear, left top, left bottom,
		from(#dcf9ca),
		to(#92d46a)
		);
    background:-moz-linear-gradient(
		top,
		#dcf9ca,
		#92d46a
		);
    filter: progid:DXImageTransform.Microsoft.gradient(
		startColorstr='#dcf9ca',
		endColorstr='#92d46a'
		);
	-webkit-animation-name: none;
	-webkit-box-shadow:0 0 30px rgba(96, 255, 0, 1);
}

Here, the background gradient has been switched from top to bottom. I’ve also stopped the animation, by setting -webkit-animation-name to none.

And that’s it. Take a look at the demo to see the final result.

Tags: animation, css3, web design