Home  > Resources  > Blog

Custom HTML Buttons with CSS

January 27, 2012 by Bibhas Bhattacharya
Category: Ajax & Web 2.0

The default <button> and <input type="submit"> tags work great but look super drab. Sometimes, you want jazz things up by adding images and stylized text. This can be easily done by converting a simple <span> into a button replacement.


First, we will define a class called "button".

<!DOCTYPE html>
<style type="text/css">
.button {
	border-style: outset;
	border-width: 3px;
	padding: 10px 10px 10px 10px;
	border-color: #ECECEC;
	background: #DADADA;
	cursor: default;
.button:active {
	border-style: inset;

Note the DOCTYPE declaration. We use the HTML5 syntax which makes a difference in IE. Things may be different if you use an old style DOCTYPE.

The key is to use the :active pseudo CSS selector. This selector matches when an element is clicked on. In normal state, we set the border-style to be outset. When clicked, the style becomes inset. That is the magic.

Then, all we have to do is use the styles from <span> elements.

Custom HTML buttons: 
<span class="button"><img align="center" src="http://cdn1.iconfinder.com/data/icons/freeapplication/png/24x24/New.png" />
Add Item</span>
<span class="button"><img align="center" src="http://cdn1.iconfinder.com/data/icons/icojoy/shadow/standart/png/24x24/001_39.png" />
Refresh view</span>

Follow Us

Blog Categories