Simple CSS3 Button Transitions

Share on facebook

Share on linkedin

Share on twitter

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

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.

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 linear, ease, 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.

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.

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

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!