Dead Easy Pure CSS Button Class

Here’s a really simple way to make a styled button using only CSS. I wrote this because a lot of the “Pure CSS Button” scripts I found on the interwebs use a PNG image for the button which is not pure enough for me dammit!

This one does not use any image at all which is good for saving space if you are, say, working on an embedded web server with only a few kB of storage. It is also quick to set up. Simply cut & paste the following lines into your CSS file and add class=”button” to your tag in the HTML.
.button {
font-size: smaller;
background: #CCCCCC;
padding: 3px;
border-top: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
text-decoration: none;
}

.button:active {
border-top: 1px solid #666666;
border-left: 1px solid #666666;
border-right: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
}

And here is an example of a link using this style:
Go to Other Page

Here is what it looks like: Test Button – how easy was that!