Skip to content

Instantly share code, notes, and snippets.

@sandeepvirk
Created March 27, 2012 05:23
Show Gist options
  • Save sandeepvirk/2212754 to your computer and use it in GitHub Desktop.
Save sandeepvirk/2212754 to your computer and use it in GitHub Desktop.
begin button styles
body, p, div, form, label, input{
/* some reset */
font-family:Verdana, Geneva, sans-serif;
font-size:small;
color:#666;
background: #3a5875
}
/* begin button styles */
.switch-wrapper{
width:400px;
margin:220px;
}
.switcher {
background:#507190;
vertical-align: bottom;
position: relative;
display: inline-block;
max-width: 100%;
vertical-align: bottom;
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
text-align:center;
}
#left{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: 0 13px;
}
#right{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -17px;
}
.left{
border-radius: 6px 0px 0px 6px;
width: 45px; height: 38px;
}
.right{
border-radius: 0 6px 6px 0;
width: 45px; height: 38px;
margin: 0 0 0 -6px
}
.switcher span{
display:inline-block;
height:18px;
margin-top:10px;
}
.switcher:hover,
.selected {
background: #27394b;
box-shadow: -1px 1px 0px rgba(255,255,255,.4),
inset 0 4px 5px rgba(0,0,0,.6),
inset 0 1px 2px rgba(0,0,0,.6);
}
.switcher::after {
content: ' ';
width: 100%;
height: 100%;
position: absolute;
top: -1px;
left: -1px;
border: solid 0px #1B1B1B;
border-radius: 6px;
}
<div class="switch-wrapper">
<div class="switcher left selected">
<span id="left">...</span>
</div>
<div class="switcher right">
<span id="right">...</span>
</div>
</div>
{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment