Castelar Design & Code

Contact

Phone: 313 • 437 • 3355 Email: support@castelar.net

Simple CSS3 Button Transitions

Here are several examples of a CSS3 transitions you can add to your website buttons and links. These will render slightly different in the major browsers, so it’s recommended to use Safari, Chrome, Firefox or Opera. Unfortunately Internet Explorer doesn’t play nicely with transitions yet.

Demo

Gray Button Green Button Black Button Blue Button

These examples will fade several link elements in and out. You can use transitions on links, unordered lists, navigation menus, divs, or get creative and think of other ways this can be applied. In these examples, I’ll simply apply the transitions to links.

Example 1 – Gray Button

Gray Button!

This css will fade in and out the text color, background-color, and border-color. This is what it will look like:

Markup

<a class="graybutton" href="#">Gray Button!</a>

CSS

.graybutton:link, .graybutton:visited {
	border: 1px solid #ddd;
	background-color: #f9f9f9;
	color: #777;
	text-decoration:none;
	padding: 7px 15px;
 
	-webkit-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
	-moz-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
	-o-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
	transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
}
 
.graybutton:hover {
	border-color: #aaa;
	background-color: #e3e3e3;
	color: #000;
 
	-webkit-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
	-moz-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
	-o-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
	transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
}

The css should be added to both a:link, a:visited and a:hover in order to get the fading effect when the user hovers over the link, and on hover release.

The transition css is written as shorthand above. The values are separated by commas and include property (e.g color), duration (e.g .25s), and timing (e.g linear). There is also a delay property (e.g 1s) that we won’t use here. It delays the transition for the specified time. The delay property would come 4th when using shorthand. You can write each property separately e.g transition-property: color .25s linear; on its own line, or use the shorthand, which is cleaner, and necessary when transitioning multiple properties, like the above gray button example.

The timing property can be specified as linearease, ease-in, ease-out, ease-in-out, or cubic-bezier (to specifiy your own timing curve). The example above uses linear for the text color transition, and ease-in-out for the background and border colors.

Browser Support

You’ll need to prefix the CSS so that all the major browsers that support the transition will render it. As you see in the example code above, you can use the -webkit, -moz, and -o prefixes for Safari/Chrome, Firefox, and Opera respectively. Another prefix used in some cases is -ms for Internet Explorer, but at this point in time transitions are not supported by IE9. You may still want to include the -ms prefix, so that when -ms-transition is in Microsoft’s working drafts, you won’t have to go back and edit your code.

Example 2 – Big Green Button

You could also add a border-radius for a different looking big green button. This example doesn’t include the 1px solid border and fades the green to a completely different brick color.

Big Green Button!

Markup

<a class="greenbutton" href="#">Big Green Button!</a>

CSS

.greenbutton:link, .greenbutton:visited {
	border-radius: 5px;
	color: #444;
	text-decoration: none;
	padding: 16px 32px;
	background-color: #8FCF45;
 
	-webkit-transition: color .5s linear, background-color .5s ease-in-out;
	-moz-transition: color .5s linear, background-color .5s ease-in-out;
	-o-transition: color .5s linear, background-color .5s ease-in-out;
	transition: color .5s linear, background-color .5s ease-in-out;
}
.greenbutton:hover {
	background-color: #D05944;
 
	-webkit-transition: background-color .25s ease-in-out;
	-moz-transition: background-color .25s ease-in-out;
	-o-transition: background-color .25s ease-in-out;
	transition: background-color .25s ease-in-out;
}

Example 3 – Black Button with Gradient

Currently, background color gradients are not capable of having transitions without hacks. One way around this is to transition an opacity so everything is faded in and out. This way you can keep your background gradients and the transition looks pretty good.

Black Button w/ Gradient!

Markup

<a class="blackbutton" href="#">Black Button w/ Gradient!</a>

CSS

.blackbutton:link, .blackbutton:visited {
	border-radius: 12px;
	color: #ddd;
	text-decoration:none;
	padding: 6px 20px;
	background: #000;
	background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
	background: -moz-linear-gradient(top, #666, #000);
	background: -o-linear-gradient(top, #666, #000);
	background: linear-gradient(top, #666, #000);
	opacity: 1;
	-webkit-transition: opacity 1s ease;
	-moz-transition: opacity 1s ease;
	-o-transition: opacity 1s ease;
	transition: opacity 1s ease;
}
.blackbutton:hover {
	opacity: .7;
	-webkit-transition: opacity .5s ease;
	-moz-transition: opacity .5s ease;
	-o-transition: opacity .5s ease;
	transition: opacity .5s ease;
}

Example 4 – Fancy Blue Button

You can also add a text-shadow and box-shadow with a 50/50 gradient background for a fancy blue button.

Fancy Blue Button!

Markup

<a class="bluebutton" href="#">Fancy Blue Button!</a>

CSS

.bluebutton:link, .bluebutton:visited {
	color: #ccc;
	text-decoration: none;
	text-shadow: 0 -1px 1px #000F4D;
	padding: 10px 30px;
	background: #8C9CBF;
	background: -webkit-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
	background: -moz-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
	background: -o-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
	background: linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
	border-color: #172D6E #172D6E #0E1D45;
	box-shadow: 0 1px 0 0 #B1B9CB inset;
	border: 1px solid #172D6E;
	border-radius: 6px;
 
	-webkit-transition: color .5s linear, background .5s ease-in-out;
	-moz-transition: color .5s linear, background .5s ease-in-out;
	-o-transition: color .5s linear, background .5s ease-in-out;
	transition: color .5s linear, background .5s ease-in-out;
}
.bluebutton:hover {
	color: #fff;
	background: #7F8DAD;
	background: -webkit-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
	background: -moz-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
	background: -o-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
	background: linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
 
	-webkit-transition: color .25s linear, background .25s ease-in-out;
	-moz-transition: color .25s linear, background .25s ease-in-out;
	-o-transition: color .25s linear, background .25s ease-in-out;
	transition: color .25s linear, background .25s ease-in-out;
}

Run along now and change the colors, sizes and durations to get the desired look and feel for your website. There are endless possibilities to explore using CSS3 transitions for buttons!

One Response to “Simple CSS3 Button Transitions”

  1. Peter Austin Says:

    Thank you very much for this post. I needed something like this for an assignment. I am not too kep on css yet, even though i am professionaly quailfied due to univertisy larning :-0

Leave a Reply