Posted By

cssbutton on 11/19/09


Tagged

css button reset


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

jesmith054


Reset Button Tag


 / Published in: CSS
 

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

  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.