Creating HTML buttons with <a> tag
March 21st, 2010 by Administrator    

In this post I would like share my experience on creating buttons in HTML and CSS.

why <a> tag? you may ask. Why not others like button, div, span or input. The answer is, <a> supports hover and active parameters in CSS by most browsers. Apple Webkit supports all CSS mouse events on all of its HTML elements, while IE doesn’t. If you try div:hover or div:active, you would get nothing. Even better, <a> tag supports focusing so you can have visitors hitting TAB to cycle through all of your buttons, and hit enter to select that button. This becomes very important when writing web applications, where buttons come in frequently.

Copy and paste this code to your new HTML and see how the result comes out.

<style>
.button {
display:inline-block;
padding:4px 8px 4px 8px;

font-family:Arial;
font-size:12px;
line-height:16px;
color:black;
text-decoration:none;

background:#9bf915;
border:1px solid #587019;
}

.button:hover {
background:#dbf759;
border:1px solid #637019;
color:black;
}

.button:active {
background:#5b7012;
border:1px solid #637019;
color:white;
}

.button:focus {
background:#f383f4;
border:1px solid #431644;
color:black;
}

.button:focus:hover {
background:#efa0d0;
border:1px solid #431644;
color:black;
}

.button:focus:active {
background:#6c276d;
border:1px solid #431644;
color:white;
}
</style>

<a id=”b1″ href=”Javascript:void(0)” onclick=”">Button 1</a>
<a id=”b2″ href=”Javascript:void(0)” onclick=”">Button 2</a>
<a id=”b3″ href=”Javascript:void(0)” onclick=”">Button 3</a>
<a id=”b4″ href=”Javascript:void(0)” onclick=”">Button 4</a>

<script language=”javascript”>
document.getElementById(‘b2′).focus();
</script>

If you do have any questions please post at the comment section.

You might also be interested in:

Share your thought:

 
Web design by Phong Vu - All content posted on here is copyright by Phong Vu and its rightful owner.