Advertisement
Tutorial #8: CSS based button using 2 images
Here is a CSS tutorial of effect button based on CSS and 2 images left part and right part. The size of first image is 7 pixels and of the second - 293 pixels. So we can construct button with maximum with of 300 pixels.
Single button example: Example button1
The images we are using:
The code:
button_example.css
a.css_button_example {
display:block;
float:left;
height:30px;
background:url(button_left.gif) transparent no-repeat top left;
padding-left:7px;
text-decoration:none;
font: bold 13px Verdana;
line-height:18px;
color:#ffffff;
}
a.css_button_example span{
background:url(button_right.gif) transparent no-repeat top right;
display:block;
padding:6px 10px 6px 3px;
}
a:hover.css_button_example {
color:#FFD8B0;
}
How to use it
<a href="somelink" class="css_button_example"><span>Some text</span></a>
CSS_button.rar