Question

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 0px;
}
#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);
}

Answer 1

You could do a combination of border-radius rules for each browser. However, I find this to be way too tedious for small images like that. Do a .png or .jpg sprite, then set the background-position on :hover and :active

For example:

#right { background: url() top right; }
#right:hover { background-position: center right; }
#right:active { background-position: bottom right; }

#left { background: url() top left; }
#left:hover { background-position: center left; }
#left:active { background-position: bottom left; }

Okay, here is some modification done with css.

dabblet.com/gist/2231617