Mac OS X Lion Buttons done with CSS

Made by Markus Reiter http://reitermark.us/

by ikbelkirasan

HTML

<input type="button" id="cancel" class="osx" value="Cancel" />
<input type="submit" id="ok" class="osx primary"  value="OK" /> 
<a id="apple" class="osx single"></a>

<a id="needhelp" class="osx rounded">Need Help?</a>
<a id="help"  class="osx round single">?</a>

<button id="button" class="osx" >&lt;button&gt;</button>
<input id="input" type="button" class="osx" value="&lt;input&gt;" />
<div id="div" class="osx" >&lt;div&gt;</div>
<a id="a" class="osx" >&lt;a&gt;</a>

<a id="italic" class="osx" ><i>Italic Text</i></a>
<a id="bold" class="osx" ><b>Bold Text</b></a>

<a href="http://reitermark.us/" id="www" class="osx" target="_blank" >My Website</a>

CSS

/* CSS for Layout */

body {
    padding: 19px;
}

.osx {
  float: left; clear: both;
  margin: 0 10px 19px 0;
}

#ok, #apple, #help, #input, #div, #a, #bold {
clear:none;
}

/* CSS for Buttons */

.osx, .osx:hover {

  color: #000; text-decoration: none; text-shadow: 0 1px rgba(255,255,255,.2);
   font:  400 13px/19px "Helvetica Neue", Arial, sans-serif;

-webkit-tap-highlight-color: transparent;

  padding: 0 12px;
    
  border: 1px solid;
  border-top-color: #9d9d9d; border-bottom-color: #939393;
  border-left-color: #949494; border-right-color: #949494;

  -webkit-border-radius: 4px;   box-shadow: 0 1px rgba(0,0,0,0.1);
  -moz-border-radius: 4px; -moz-box-shadow: 0 1px rgba(0,0,0,0.1);
  border-radius: 4px;   -webkit-box-shadow: 0 1px rgba(0,0,0,0.1);
    
  -webkit-appearance: none;

  background: #ffffff; /* Old browsers */

  background: -webkit-gradient(linear, left top, left bottom, 
             /* Chrome, */     color-stop( 0%, #ffffff),
             /* Safari4+ */                 color-stop(25%, #ffffff),       
                                                        color-stop( 30%, #fcfcfc), 
                                                                       color-stop(35%, #f9f9f9),            
                               color-stop(40%, #f7f7f7),    
                                            color-stop(45%, #f5f5f5),         
                                                        color-stop( 50%, #f2f2f2), 
                                                                       color-stop(50%, #ececec),                 
                               color-stop(80%, #ededed),
                                            color-stop(95%, #efefef),
                                                        color-stop(100%, #f2f2f2)); 
  background: -webkit-linear-gradient(top,     #ffffff  0%, #ffffff 25%, #fcfcfc  30%, #f9f9f9 35%,
               /* Chrome10+, */                #f7f7f7 40%, #f5f5f5 45%, #f2f2f2  50%, #ececec 50%,
             ...