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.

Default State Hover State Active State

Next