06.14.11
Css button style
With the button is to use background image, css writing for them, with possible repeat backgorund case is very simple. However, with a button on the style as how they can be scaled according to the text ..
With people writing each button css normally would cut into an image. It is not necessary, we can write the following:
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | a.button { background: transparent url(button-right.png) no-repeat scroll top right; display: block; float: left; height: 24px; margin:5px 6px 0 0; padding-right: 25px; text-decoration: none; color: #FFF; font-family: Arial, Helvetica, sans-serif; font-size:11px; } a.button span { background: transparent url(button-left.png) no-repeat; display: block; line-height: 22px; padding: 0 0 5px 12px; text-shadow: 0 -1px 0 #333; } a.button:hover span{ text-decoration:none; } |
Html:
1 2 3 4 5 6 7 | <div style="width:200px; margin:0 auto;"> <a class="button" href="#"><span>View demo</span></a> <a class="button" href="#"><span>CSS3</span></a> <a class="button" href="#"><span>Css3 News</span></a> <a class="button" href="#"><span>Jquery & Javascript</span></a> <a class="button" href="#"><span>Css3 and html5</span></a> </div> |