In Action

How to turn an HTML Anchor into a button.

This simple example demonstrates how easy it is to turn an html anchor tag into a button. This example does not require an image. It also simulates the effect of a real button when your press it.

Example


Code

You can right mouse click in the iframe above (the example that is displayed) and get the source for the entire page. Or, you can cut-n-paste the code below.



CSS Code

CSS Code

 

.cssbutton{
background-color: #d1ec4c;
border: 2px #d1ec4c outset;
padding: 1px 4px;
color: black;
text-decoration: none;
font: bold 90% "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
}

.cssbutton:hover{
border-style: inset;
background-color: #e3f48e;
padding: 2px 3px 0 5px; /*shift text 1px to the right and down*/
}

HTML Code

HTML Code

 

<p><a href="" class="cssbutton">CSS Button</a></p>