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 use an image as a frame, and scroll inside? Simulating a phone on a website

    Is it possible to have a web browser scroll to show CSS fixed position items that are outside the viewport of the web browser?

    How do i hook media queries to screen resolution?

    How to stop some css from getting applied to all
  • tag
  • how to load css rules using javascript?

    how to overrule prior css

    How to use the word-wrap property in CSS 2.1 and validate CSS

    CSS Lining up images. Always 1px difference. Why/How?

    How to create uparrow downarrow using simple css

    Am centering content vertically using css, how to remove empty space?

    How do I get a link to ignore hover on mouseover?

    How to style HTML5 input type=“datetime-local” [duplicate]

    How to merge .CSS files with Sass (or other tool)? [duplicate]

    How to CSS sandbox/reset an entire DIV area in the current page?

    How to use a CSS for only one div and not the rest of the code?

    How can I add my own CSS styles to CKEditor

    How to make text vertical in a jQuery UI Layout toggler?

    How do I prevent it from newlining in html?

    Getting the title of a picture overlayed onto the picture of a slideshow

    How to achieve vertical alignmernt of text paragraphs between Bootstrap columns

    jQuery show multiple image thumbnail before upload

    How to include 3 background images in a single css?

    Compass delimited list separator - how to set to – [duplicate]

    How to automatically resize a box to fit content — with jQuery Mobile

    How can I add a css class to an updatepanel in ASP.Net?

    how to set css for html page opened by 'appAPI.openURL' in crossrider

    How to copy this semi-static menu?

    How to center images vertically these divs?

    How to give same style to first 2 paragraphs differently in css

    How to make background-image size height always equal what the image height needs to be for full width image?