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&nbsp;&raquo;</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/
Tagged button, element, css, html, rounded