How to replicate this button in CSS


Tags: html,css

Problem :

enter image description here

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);
}


Solution :

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


    CSS Howto..

    How to center a div tag in a html page without being affected by zooming

    How can I format all td elements contained in a table with class myclass in CSS?

    CSS/Menu: How to position element right below/beside elements

    How to make a
    container width and height for each same as “the value of clientWidth and clientHeight in maximized window”?

    Button transition using javascript and css, how to temporarily disable the transition

    How to position an image of different size using css?

    how to see background color of div when if move on image

    How do I keep a span from being at the end of a line?

    How can I remove the border around an image without a source?

    How to apply css styling on rewards points notification email in opencart 2.0.1.1?

    How to make CSS menu bar activated only after my mouse cursor is at the menu.

    How to make the background of my text larger?

    Using `.toggle()` rather than applying a class to show content

    How to read this hover syntax in css?

    How to animate a child element with dynamic width content to the center of its parent div, jquery, greensock, css

    How to apply css for a class within h2?

    How to adjust 100% browser height and width with CSS?

    How to remove/replace cached css and js file from client Browser?

    How to force the horizontal scroll bar to appear?

    How do I alter this HTML/CSS to make the container expand horizontally to the floated children?

    How to tell what is the right css line to apply in nested classes

    How to put all Array values in $_GET[]

    how to get the site to not collapse with css

    How do I position this image using CSS so it overlaps a div but displays inline?

    how to css for data attribute [duplicate]

    How to format CSS of a dropdown menu so if the 'parent' dropdown is current then the children will not take the formatting of the parent

    CSS: How to make a span link to expand?

    How to display random parts of a page on refresh?

    How to convert 6 digit color code to 3 digit quickly in css file?

    How to resize parent div while keeping dynamic child divs 100% height