Custom HTML Buttons with CSS


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.

image

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

<!DOCTYPE html>
<html>
<head>

<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;
}
</style>

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.

<p>
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>
</p>

  1. No comments yet.
(will not be published)

*