Advanced Search

Reset Button Tag

/ Published in: CSS
Save to your folder(s)
Inspired by http://particletree.com/features/rediscovering-the-button-element/

Expand | Embed | Plain Text

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.