CSS Button Links

Contact Us or call 1-877-932-8228
CSS Button Links

CSS Button Links

Using these pseudo-classes, it is possible to create links that look like buttons, something you needed images to do before CSS. The following example illustrates this:

Code Sample:

Links/Demos/LinkButtons.html
<!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>

The screenshots below show how these CSS buttons look in different states: the default state, the hover state, and the active state. Note that some of the properties (e.g., border, margin, and padding) used in this have not yet been covered.

Next