Reset Button Tag


/ Published in: CSS
Save to your folder(s)

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


Copy this code and paste it in your HTML
  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

You need to login to post a comment.