Northward

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, but all of them including Safari, Chrome, Firefox, Edge and Opera support transitions.

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:

HTML Markup

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

CSS

.graybutton {
	border: 1px solid #ddd;
	background-color: #f9f9f9;
	color: #777;
	text-decoration:none;
	padding: 7px 15px;
	transition: all .2s ease-in-out;
}

.graybutton:hover {
	border-color: #aaa;
	background-color: #e3e3e3;
	color: #000;
	transition: all .2s 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 .2s), 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 .2s 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!

HTML Markup

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

CSS

.greenbutton {
	border-radius: 5px;
	color: #fff;
	text-decoration: none;
	padding: 16px 32px;
	background-color: #8FCF45;
	transition: all .2s linear;
}
.greenbutton:hover {
	background-color: #D05944;
	transition: all .2s linear;
}

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!

HTML Markup

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

CSS

.blackbutton {
	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;
	transition: opacity 1s ease;
}
.blackbutton:hover {
	opacity: .7;
	transition: opacity .2s 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!

HTML Markup

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

CSS

.bluebutton {
	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;
	transition: all .2s 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%);
	transition: all .2s ease-in-out;
}

You can change the CSS class names to whatever you’d like. They do not need to be, for example: bluebotton.

Example 5 – Button using the Button HTML tag

You can also use the more semantically correct button tag to mark up your HTML. This is now the preferred method, especially buttons for forms.

Adding a class name to your button is optional. You can just style the button tag itself in your CSS. The one major difference from <a> tags is that you should specify a “type” when using <button> tags. The three types of buttons are reset, submit and button. See the example below.

HTML Markup

<button type="submit">Pink Submit Button</button>

CSS

button {
	border-radius: 5px;
	color: #fff;
	text-decoration: none;
	padding: 16px 32px;
	background-color: #df3e7b;
	transition: all .2s;
}
button:hover {
	background-color: #812749;
	transition: all .2s;
}

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

Jeff

Leave a Comment