Buttons with <code>&lt;button&gt;</code> element


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

I stole this, but it's so great! All future buttons will use this.


Copy this code and paste it in your HTML
  1. /* BUTTONS */
  2.  
  3. .buttons a, .buttons button{
  4. display:block;
  5. float:left;
  6. margin:0 7px 0 0;
  7. background-color:#f5f5f5;
  8. border:1px solid #dedede;
  9. border-top:1px solid #eee;
  10. border-left:1px solid #eee;
  11.  
  12. font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
  13. font-size:100%;
  14. line-height:130%;
  15. text-decoration:none;
  16. font-weight:bold;
  17. color:#565656;
  18. cursor:pointer;
  19. padding:5px 10px 6px 7px; /* Links */
  20. }
  21. .buttons button{
  22. width:auto;
  23. overflow:visible;
  24. padding:4px 10px 3px 7px; /* IE6 */
  25. }
  26. .buttons button[type]{
  27. padding:5px 10px 5px 7px; /* Firefox */
  28. line-height:17px; /* Safari */
  29. }
  30. .buttons button img, .buttons a img{
  31. margin:0 3px -3px 0 !important;
  32. padding:0;
  33. border:none;
  34. width:16px;
  35. height:16px;
  36. }

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.