Toggle Buttons Cleaned Up
by kizer
HTML
<div id="toggle">
<div class="links">
<button>Contacts</button>
<button>Followers</button>
<button class="selected">Messages</button>
</div>
</div>
CSS
#toggle {
position: absolute;
top: 12px;
left: 0px;
right: 0px;
height: 44px;
background-color: #4F5661;
background-image: -webkit-gradient(linear, left top, left bottom, from(#4F5661), to(#3B3F42));
background-image: -webkit-linear-gradient(top, #4F5661, #3B3F42);
background-image: linear-gradient(top, #4F5661, #3B3F42);
border-bottom: 1px solid rgba(0, 0, 0, 1);
border-top: 1px solid rgba(255, 255, 255, .32);
margin: -13px 0 13px 0;
text-align: center;
}
#toggle .links, .links {
height: 30px;
margin: 0 auto 0px auto;
position: relative;
top: 9px;
}
#toggle button {
-webkit-apperance: none;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
height: 27px;
display: inline-block;
margin-top: 1px;
font: bold 13px;
text-decoration: none;
color: #3F5C84;
text-shadow: white 0 1px 0;
background: rgba(223,225,230,1);
padding: 4px 12px;
color: white;
text-shadow: 0 1px 0 black;
border: 1px solid black;
border-right: none;
background-color: #474646;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(71, 70, 70)), to rgba(0, 0, 0, .45)));
background-image: -webkit-linear-gradient(top, rgb(71, 70, 70), rgba(0, 0, 0, .45));
background-image: linear-gradient(top, rgb(71, 70, 70), rgba(0, 0, 0, .45));
box-shadow: 0 1px rgba(255,255,255, .21),
0px 1px 1px rgba(255,255,255,.46) inset;
border-radius: 0px;
margin: -2px;
}
#toggle button:first-child {
-webkit-apperance: none;
border-right: 1px solid #6D7E91;
margin-left: -4px;
background: rgba(223,225,230,1);
padding: 4px 6px 4px 6px;
color: white;
text-shadow: 0 1px 0 black;
border: 1px solid black;
background-color: #474646;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(71, 70, 70)), to rgba(0, 0, 0, .45)));
background-image: -webkit-linear-gradient(top,...