如何在CSS中复制此按钮

Question

我正在尝试创建一个CSS主题切换器按钮，如下所示。顶部图像显示了我到目前为止的内容，底部图像显示了我想要创建的内容。

我不是最好的东西我更像是一个后端编码器。我真的可以使用一些帮助。

我在这里有http://dabblet.com/gist/2230656

的代码现场演示

只是看看我有什么和目标图像，一些差异。

• 我需要添加渐变
• 边境不对我
• Radius稍微偏离
• 可能还有其他一些东西？

此处还有代码......无论如何都可以进行更改以改进这一点，命名和内容可以改进我确信但是我可以使用任何帮助。

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

此按钮可以在纯CSS中实现，无需任何外部图像：

http://jsfiddle.net/canassa/weABj/4/

请注意，使用纯CSS有一些缺点：

IE10

一切都应该完美呈现。

IE9

渐变停止工作。

IE8

边界半径停止工作。

IE7

地狱破裂

Answer 2

您可以为每个浏览器执行border-radius规则的组合。但是，我发现这对于像这样的小图像来说太单调乏味了。做一个.png或.jpg精灵，然后设置背景位置：hover和：active

例如：

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

好的，这是用css做的一些修改。

dabblet.com/gist/2231617

Answer 3

替换...

#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{
    background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
    background-position: -0px -19px;
}

#right{
    background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
    background-position: 0px 0px;   
}

请参阅DEMO