How to make rounded buttons with the button element
HTML posted about 1 year ago by christian
25 pixel high buttons at your service:
1 button { 2 border: 0; 3 padding: 0; 4 font-variant: small-caps; 5 height:25px; 6 background: transparent url('../images/button-background-left.png') no-repeat; 7 cursor: pointer; 8 text-align: center; 9 } 10 11 button span { 12 font-family: georgia,serif; 13 line-height: 25px; 14 background: transparent url('../images/button-background.png') no-repeat top right; 15 position:relative; 16 display:block; 17 white-space:nowrap; 18 margin-top: -2px; 19 padding:0 15px; 20 }
HTML :
1 <button type="submit" value="Hello"><span>Hello »</span></button>
IE 6 & 7 might need:
1 button { 2 width:auto; 3 overflow:visible; 4 } 5 button span { 6 margin-top:1px; 7 }
References
- http://www.filamentgroup.com/lab/styling_the_button_element_with_sliding_doors/
- http://particletree.com/features/rediscovering-the-button-element/