How to replicate this button in CSS
- by jasondavis
I am trying to create a CSS theme switcher button like below. The top image shows what I have so far and the bottom image shows what I am trying to create.
I am not the best at this stuff I am more of a back-end coder. I could really use some help.
I have a live demo of the code here http://dabblet.com/gist/2230656
Just looking at what I have and the goal image, some differences.
I need to add a gradient
The border is not right on mine
Radius is a little off
Possibly some other stuff?
Also here is the code...it can be changed anyway to improve this, the naming and stuff could be improved I am sure but I can use any help I can get.
HTML
<div class="switch-wrapper">
<div class="switcher left selected">
<span id="left">....</span>
</div>
<div class="switcher right">
<span id="right">....</span>
</div>
</div>
CSS
/* begin button styles */
.switch-wrapper{
width:400px;
margin:220px;
}
.switcher {
background:#507190;
display: inline-block;
max-width: 100%;
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
position:relative;
}
#left, #right{
width:17px;
height:11px;
overflow:hidden;
position:absolute;
top:50%;
left:50%;
margin-top:-5px;
margin-left:-8px;
font: 0/0 a;
}
#left{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: 0px px;
}
#right{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -19px;
}
.left, .right{
width: 30px; height: 25px;
border: 1px solid #3C5D7E;
}
.left{
border-radius: 6px 0px 0px 6px;
}
.right{
border-radius: 0 6px 6px 0;
margin: 0 0 0 -6px
}
.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);
}
