Advertisement
Tutorial #7: CSS based button without images
I saw a number of examples and totorials on other websites, but more of them are buggy or very complex for use. In this article i will show you how to build effect buttons fast and easy and also how to arrange them horizontal or vertical.
Single button example: Example button1
Buttons arranged horizontal: Example button1 Example button2 Example button3
Buttons arranged vertical: Example button1 Example button2 Example button3
The code:
a.css_button_example {
clear:both;
display:block;
float:left;
padding:5px;
margin:0 10px 10px 0;
background:#E9E9E9;
border:1px solid #999999;
text-decoration:none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
line-height:16px;
text-align:center;
color:#000066;
}
a.css_button_example:hover {
color:#FFFFFF;
background:#999999;
}
<a href="somelink" class="css_button_example">Example button1</a>
<a href="somelink" class="css_button_example" style="clear:none;">Example button1</a>
<a href="somelink" class="css_button_example" style="clear:none;">Example button2</a>
<a href="somelink" class="css_button_example" style="clear:none;">Example button3</a>
<a href="somelink" class="css_button_example">Example button1</a>
<a href="somelink" class="css_button_example">Example button2</a>
<a href="somelink" class="css_button_example">Example button3</a>
Of course you can change the colors or add borders color effect. And remember! The best practice for horizontal or vertical arranged buttons (and mostly for navigation) is by using UL and LI structure - it is more managable. The descripted way is useful for form buttons - 1 or maximum 2.
CSS_button.rar