CSS3 Buttons With Pseudo Classes

Pseudo classes are bolted on to selectors to specify a state or relation to the selector. They take the form of selector:pseudo class { property: value; }, simply with a colon in between the selector and the pseudo class. Many CSS proposals are not supported by all browsers, but there are four pseudo classes that can be used safely when applied to links.

• Link - This is the for the default link.
• Visited - This Is the state you give to links which have already been visited.
• Hover - This is the state when the mouse is over the link.
• Active - This is the state you give when the visitor clicks on the link.

In this tutorial you will learn how you can use this Pseudo classes with CSS3 to create different states for your web buttons.

We are going to use the Link, Hover and active classes to give the button different styles depending on how the visitor is interacting with it. The image below shows the different styles we are going to create.

This image shows three different styles for link, hover and active. The HTML for this button is simple, it's just a link anchor tag with a class.

<a href="#" class="web_button">CSS Button</a>

#Button Link State

This is the default setting for the button, for this we are going to use gradient colours, box shadow and border-radius.

.web_button{
	background: #0.4; /* Old browsers */
	background: -moz-linear-gradient(top,  #b4df5b 0%, #b4df5b 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4df5b), color-stop(100%,#b4df5b)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #b4df5b 0%,#b4df5b 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #b4df5b 0%,#b4df5b 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #b4df5b 0%,#b4df5b 100%); /* IE10+ */
	background: linear-gradient(top,  #b4df5b 0%,#b4df5b 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4df5b', endColorstr='#b4df5b',GradientType=0 ); /* IE6-9 */
	width:125px;
	padding:20px;
	display:inline-block;
	color:#fff;
	text-decoration:none;
	font-weight:bold;
	text-align: center;
	border:1px solid #8dc025;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	-webkit-box-shadow: 0px 2px 3px 2px rgba(50, 50, 50, 0.4);
	-moz-box-shadow: 0px 2px 3px 2px rgba(50, 50, 50, 0.4);
	box-shadow: 0px 2px 3px 2px rgba(50, 50, 50, 0.4);
}

#Button Hover State

On the hover of the button we are going to change the background colour of the button.

.web_button:hover{
	text-decoration:none;
	background: #8dc025; /* Old browsers */
	background: -moz-linear-gradient(top,  #8dc025 0%, #8dc025 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8dc025), color-stop(100%,#8dc025)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #8dc025 0%,#8dc025 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #8dc025 0%,#8dc025 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #8dc025 0%,#8dc025 100%); /* IE10+ */
	background: linear-gradient(top,  #8dc025 0%,#8dc025 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8dc025', endColorstr='#8dc025',GradientType=0 ); /* IE6-9 */
}

#Button Active State

For the active state we are changing the box shadow to be inverted by using the inset on the box-shadow property.

.web_button:active{
	-webkit-box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.4);
	box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.4);
	cursor: pointer;
}

That's how you use the different Pseudo Classes on links in CSS.