Advanced Search

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.

Expand | Embed | Plain Text

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.