OSX button styles
HTML
<button class="osx-btn">Button</button>
<div class="osx-btn-group">
<button class="osx-btn">A</button>
<button class="osx-btn">B</button>
<button class="osx-btn">C</button>
<button class="osx-btn">D</button>
<button class="osx-btn icon">♠</button>
<button class="osx-btn icon">♥</button>
</div>
<button class="osx-btn btn-dropdown">View</button>
<div class="osx-btn-split">
<button class="osx-btn icon">←</button>
<button class="osx-btn icon">→</button>
</div>
CSS
.osx-btn {
color: #333;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
border-radius: 4px;
outline: none;
border: 1px solid #7F7F7F;
border-top: 1px solid #7E7E7E;
border-bottom: 1px solid #6F6F6F;
box-shadow: inset 0 1px 0 #F6F6F6, 0 1px 0 #CDCDCD;
background: linear-gradient(to bottom, #F1F1F1 0%, #C2C2C2 100%);
-webkit-font-smoothing: anti-aliased;
padding: 5px 6px 4px;
font-size: 13px;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-transition: all 0.1s ease;
}
.osx-btn.icon {
font-size: 18px;
padding: 0 6px 2px;
}
.osx-btn.active, .osx-btn:active {
color: white;
z-index: 2;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
border: 1px solid #595959;
border-top: 1px solid #575757;
border-bottom: 1px solid #858585;
box-shadow: 0 1px 0 #CDCDCD;
background: linear-gradient(to bottom, #676767 0%, #9A9A9A 100%);
}
.osx-btn-group > .osx-btn {
position: relative;
margin: 0 0 0 -5px;
border-radius: 0;
}
.osx-btn-group > .osx-btn:first-child {
border-radius: 3px 0 0 3px;
margin: 0;
}
.osx-btn-group > .osx-btn:last-child {
border-radius: 0 3px 3px 0;
}
.osx-btn.btn-dropdown:after {
display: inline-block;
content:'▼';
color: #555;
text-shadow: 0 1px 0 rgba(255, 255, 255, 1), 0 -2px 0 rgba(0, 0, 0, 1);
font-size: 18px;
width: 14px;
height: 12px;
margin: 0 0 -12px 3px;
overflow: hidden;
position: relative;
top: -1px;
line-height: 0px;
}
.osx-btn-split:before {
display: block;
content: '';
background: rgba(0,0,0,0.4);
position: relative;
top: 0;
left: 4.5%;
margin-bottom: -28px;
height: 26px;
width: 1px;
border-bottom: 1px solid #6F6F6F;
box-shadow: inset 0 1px 0 #F6F6F6, 0 1px 0 #CDCDCD;
}
.osx-btn-split:active:before {
background: #676767;
}
.osx-btn-split > .osx-btn:first-child {
margin-right: -5px;
border-radius: 3px 0 0 3px;
...