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.

UT.no is a soon to be released portal for hikers and other nature lovers.  The genius responsible for their graphic design has incorporated a (hand drawn!) trekking map into the background. It may be the most appropriate and well executed tiled background I have ever seen.

At DeleteLondon.com, a set of randomized backgrounds add another dimension to the user experience. Many of the backgrounds I’ve seen while refreshing the site frantically look very good, too.

The wooden texture is used as a background in many websites. Because it works. CarlCartee.com is a well executed example.

Another example of a wooden texture background. At Outlaw Design Blog, it’s more than just a background.

At Snook.ca, curls are a key design element, being used in the header and footer as well as the subtle but beautiful background image.

A concrete wall background at Bridge55.com.

The background at Colour Pixel consists of, well, coloured pixels. Simple and brilliant.

Pixels are the theme of the background at Frenzy Labs as well.

Cardboard texture – Another appropriate background image seen at Carbonica.org.

Part abstract, part grunge style stains, part wallpaper, the background at Bright Creative seems to be many things. It most certainly is beautiful and decorative.

The subtle blue ornaments in the background at Enlighten Designs almost look like water.

Matt Mullenweg‘s site is an orgie of ridiculously good looking design elements, one of which is a grunge style splatter background.

The background at Design Sponge is some kind of fabric texture. Simple, subtle and neat.

Another example of a tiled background made from fabric texture at Youandigraphics.com.

Mosaic tiles make up the background at Stroybass.com. The gradient is also a nice touch that underlines the effect of being under water, like in their pools.

While researching for this article, I found that quite a few of the big beer websites have some very annoying features. Many of them are so called interactive presentations entirely built in flash, they take a long time to load, and demand you type your date of birth before allowing you to enter. I don’t know how that’s going to keep underage visitors out, but it will certainly piss some older visitors off. The Corona website never finished loading. Guinness wouldn’t let me in at all despite the fact that I’m 28 (and a half!) years old. In stead, they redirected me to The Century Council, an organization dedicated to eliminate drunk driving and underage drinking. Are they trying to insult me?

Fortunately, not all beer related websites are utter crap. Check out these 5 good looking counterparts.