Awesome CSS3 Buttons With :before and :after pseudo-classes

by: Preston Schmidt

:before and :after CSS3 Buttons

We are going to look at creating a few of the coolest css3 buttons you can make with the user of the :before and :after pseudo-classes. It's fairly easy and using these pseudo-classes gives you a lot of power to create some pretty fancy buttons for your site and content.

First we will look at a very nice rollover effect by using both the :before and :after pseudo elements on the same link item. The first step is to create an html link and start giving it some style just like you normally would, but don't worry about any color styles at this point as these will be done on the :before and :after elements. You'll want to do the standard of display: block; and give some padding to make a better clickable link on your page.

Here is the css and html, make sure to click on "result" to see it in action:

Some of the important points here... You need to make sure your a tag has overflow set to hidden. The :before and :after elements are both absolutely positioned and their heights and widths are set to 100% as to be the same size as your a tag. With the :before and :after, you are creating content on the page which you can style anyway you would like, but with text absolutely positioned you need to make sure to set line-height or use some other css style to make sure it is vertically aligned. I've used the calc() value which only works in modern browsers to set the line height to twice the height of the container plus half the height of the text, this effectively vertically centers the text.

Also be sure to note how we write out the hover transitions for the :before and :after for the link tag, the order is important. If you look at the css you can also see a cool use of the box-shadow property providing us with a double border effect.

:before Full Screen Overlay On Hover

This is a great way to dim out the entire screen on hover with just pure CSS and no need for javascript. Here we are going to use the :before pseudo-class and some help from the z-index property to make sure our buttons remain on top of all other page elements...

Be sure to use the pointer-events property and give it a value of none, this ensures that hovering over the ":before" won't keep it in view so you can hover out of the button.

Use The atrr to Show the Link Attribute on Hover

It is possible to show the various attributes of a link tag with the css content property. You can show the class, the title, the data, the href, or whatever else may reside inside your tag. Here we are going to show the href value during hover. Adding a little style style you could make this a nice looking tooltip, or even provide useful information to users with just a simple message as the content value.

Copy and use and experiment as you will, this is a fun way to use some of the great pseudo-classes and make your site more interactive for your users!

A really great use for displaying the href value of a link would be in your print media query styles. This way when users print out your webpage, links will display the link location rather than the link text.


Video, Web, and Design Agency