advanced code snippet search

Posted By

cssbutton on 11/19/09


Tagged

css button reset


Versions (?)

Reset Button Tag

 / Published in: CSS
 

Inspired by http://particletree.com/features/rediscovering-the-button-element/

Expand | Embed | Plain Text 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<title>Reset Button Tag</title>
  5.  
  6. 	<style type="text/css">
  7. 		button { background: none; border: none; margin: 0; padding: 0; font-size: 0; line-height: 0; width: auto; overflow: visible; }
  8. 		button div { border: 1px solid; font-size: 12px; line-height: 12px; }
  9. 	</style>
  10. </head>
  11.  
  12. <body>
  13. 	<form><button type="submit"><div>Hello</div></button></form>
  14.  
  15. 	<!-- By zeroing out the button completely and applying styles to the inner div, you avoid a lot of cross-browser height/width inconsistencies. -->
  16. </body>
  17. </html>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: cssbutton on November 20, 2009

Forgot to add: button::-moz-focus-inner { border: 0; padding: 0; }

(From http://www.aheadcreative.com/removing-unwanted-button-padding-in-firefox/)

You need to login to post a comment.