How to Create CSS Button Links

See CSS: Tips and Tricks for similar articles.

You can use CSS pseudo-classes to create CSS buttons. Before CSS, you needed images to create links that looked like buttons.

First, set the appearance of the button in a style definition for the a tag. The following code creates a block around the text that is a light-green color (Saltpan) with specified fonts and font size, as well as margins and borders.

a {
	display: block;
	background-color: #eaf1dd;
	color: #060;
	text-decoration: none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1.5em;
	padding: 6px 4px;
	margin: 4px;
	border-right: 2px solid #999999;
	border-bottom: 2px solid #999999;
	border-top-width: 0px;
	border-left-width: 0px;
}

Next, add the pseudo-classes for what the text will look like when it's hovered over and active.

a:hover
{
	color: #030;
	border: 1px solid #9999ff;
}

a:active
{
	color: #aca;
	border-left: 2px solid #030;
	border-top: 2px solid #030;
	border-right-width: 0px;
	border-bottom-width: 0px;
}

Then add the links.

<div>
	<a href="http://www.washingtonpost.com">WashingtonPost.com</a>
	<a href="http://www.webucator.com">Webucator</a>
	<a href="http://www.google.com">Google</a>
</div>

The full code looks like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Link Buttons</title>
<style type="text/css">
div {
	width: 300px;
}

a {
	display: block;
	background-color: #eaf1dd;
	color: #060;
	text-decoration: none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1.5em;
	padding: 6px 4px;
	margin: 4px;
	border-right: 2px solid #999999;
	border-bottom: 2px solid #999999;
	border-top-width: 0px;
	border-left-width: 0px;
}

a:hover
{
	color: #030;
	border: 1px solid #9999ff;
}

a:active
{
	color: #aca;
	border-left: 2px solid #030;
	border-top: 2px solid #030;
	border-right-width: 0px;
	border-bottom-width: 0px;
}
</style>
</head>
<body>
<h1>Button Links</h1>
<div>
	<a href="http://www.washingtonpost.com">WashingtonPost.com</a>
	<a href="http://www.webucator.com">Webucator</a>
	<a href="http://www.google.com">Google</a>
</div>
</body>
</html>

And now you have what looks like buttons for your links. CSS Button