title: How to replicate this button in CSS
body: <p><img src="https://i.stack.imgur.com/SkssQ.png" alt="enter image description here"></p>
  
  <p>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.</p>
  
  <p>I am not the best at this stuff I am more of a back-end coder.  I could really use some help.  </p>
  
  <p>I have a live demo of the code here <a href="http://dabblet.com/gist/2230656" rel="nofollow noreferrer">http://dabblet.com/gist/2230656</a></p>
  
  <p>Just looking at what I have and the goal image, some differences.</p>
  
  <ul>
  <li>I need to add a gradient</li>
  <li>The border is not right on mine</li>
  <li>Radius is a little off</li>
  <li>Possibly some other stuff?</li>
  </ul>
  
  <p>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.</p>
  
  <p>HTML  </p>
  
  <pre><code>&lt;div class="switch-wrapper"&gt;
      &lt;div class="switcher left selected"&gt;
          &lt;span id="left"&gt;....&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="switcher right"&gt;
          &lt;span id="right"&gt;....&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS  </p>
  
  <pre><code>/* 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);
  }
  </code></pre>