纯css写一个好看的按钮
以下开关按钮， 主要还是css阴影的使用， 大多数人知都却很少用的， 单个元素可以使用多重阴影效果
以下是css
/* 开关站 */
.m-switch-station{
width: 320px;
height: 378px;
background: rgba(9, 62, 53, 0.4);
position: fixed;
bottom: 138px;
right: 358px;
z-index: 9;
background: rgba(9, 62, 53, 0.4);
border: 1px solid rgba(5, 10, 9, 0.5);
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.5);
box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.5);
}
.m-switch-station .u-head{
width: 100%;
position: absolute;
left: 0;
top: 0;
height: 38px;
line-height: 38px;
background: rgba(16, 43, 35, 0.8);
color: #ededed;
font-size: 13px;
letter-spacing: 1px;
}
.m-switch-station .u-head p{
padding: 0 12px;
}
.m-switch-station .u-body{
margin-top: 38px;
padding: 20px 30px 8px;
color: #ededed;
font-size: 14px;
}
.m-switch-station .u-body .line-item{
height: 40px;
line-height: 40px;
margin-bottom: 12px;
box-sizing: border-box;
padding-left: 108px;
position: relative;
}
.m-switch-station .u-body .line-item .u-label{
display: block;
width: 95px;
text-align: right;
position: absolute;
left: 0;
top: 0;
}
.m-switch-station .u-body .line-item .switch-box{
position: relative;
}
.m-switch-station .switch-box .light-switch{
width: 108px;
height: 25px;
line-height: 25px;
background: #ccc;
-webkit-border-radius: 10px;
border-radius: 10px;
display: inline-block;
vertical-align: middle;
-webkit-box-shadow: inset -1px 2px 1px rgba(0,0,0,1), -1px 1px 0 rgba(255,255,255,.8);
box-shadow: inset -1px 2px 1px rgba(0,0,0,1), -1px 1px 0 rgba(255,255,255,.8);
position: relative;
-webkit-transform: translate(0,-2px);
transform: translate(0,-2px);
}
.m-switch-station .switch-box .light-switch.on{
-webkit-box-shadow: inset 1px 2px 1px rgba(0,0,0,1), 1px 1px 0 rgba(255,255,255,.8);
box-shadow: inset 1px 2px 1px rgba(0,0,0,1), 1px 1px 0 rgba(255,255,255,.8);
}
.m-switch-station .switch-box .light-switch >span{
width: 50%;
height: 25px;
line-height: 26px;
overflow: hidden;
position: absolute;
top: 0;
text-align: center;
color: rgba(16, 43, 35, 0.8);
font-weight: bold;
font-size: 13px;
text-indent: 1px;
letter-spacing: 1px;
cursor: pointer;
}
.m-switch-station .switch-box .light-switch .s-off{
-webkit-border-radius: 10px 0 0 10px;
border-radius: 10px 0 0 10px;
left: 0;
-webkit-transform: translate(-1px, 1px);
transform: translate(-1px, 1px);
background-color: #27312e;
color: #fe303f;
text-shadow: 0 0 1px #fe303f, -1px 1px 4px #fe303f;
text-indent: 6px;
}
.m-switch-station .switch-box .light-switch .s-on{
-webkit-border-radius: 0 10px 10px 0;
border-radius: 0 10px 10px 0;
right: 0;
-webkit-transform: translate(1px, 1px);
transform: translate(1px, 1px);
text-indent: -6px;
}
.m-switch-station .switch-box .light-switch.on .s-off{
background-color: initial;
color: initial;
text-shadow: none;
}
.m-switch-station .switch-box .light-switch.on .s-on{
background-color: #27312e;
color: #9FF33D;
text-shadow: 0 0 1px #9FF33D, 1px 1px 4px #9FF33D;
}
.m-switch-station .switch-box .light-switch:not(.on) .s-on:hover,
.m-switch-station .switch-box .light-switch.on .s-off:hover{
color: rgba(16, 43, 35, 0.8);
text-shadow: 0 0 3px rgba(16, 43, 35, 0.4);
}以下是html结构
<!-- 开关站 -->
<div class="m-switch-station" id="switchStation">
<div class="u-head">
<p>环网开关站</p>
</div>
<div class="u-body">
<div class="line-item">
<span class="u-label">指示灯1：</span>
<div class="switch-box">
<div class="light-switch" switch-target="light01" switch-val="off"></div>
</div>
</div>
<div class="line-item">
<span class="u-label">指示灯2：</span>
<div class="switch-box">
<div class="light-switch" switch-target="light01" switch-val="off"></div>
</div>
</div>
<div class="line-item">
<span class="u-label">指示灯3：</span>
<div class="switch-box">
<div class="light-switch" switch-target="light01" switch-val="on"></div>
</div>
</div>
<div class="line-item">
<span class="u-label">指示灯4：</span>
<div class="switch-box">
<div class="light-switch" switch-target="light01" switch-val="off"></div>
</div>
</div>
<div class="line-item">
<span class="u-label">指示灯5：</span>
<div class="switch-box">
<div class="light-switch" switch-target="light01" switch-val="off"></div>
</div>
</div>
<div class="line-item">
<span class="u-label">指示灯6：</span>
<div class="switch-box">
<div class="light-switch" switch-target="light01" switch-val="off"></div>
</div>
</div>
</div>
</div>以下是js
/** 环网开关组 **/
function switchStation () {
var scope = this
this.dom = $("#switchStation")
this.render = function () {
var light_switch_dom = this.dom.find('.light-switch');
var append_dom = `<span class="s-off">OFF</span>
<span class="s-on">ON</span>`
$.each(light_switch_dom, function(index, item){
var $dom = $(this)
$dom.attr('switch-val') == 'on' && $dom.addClass('on')
$dom.append(append_dom)
$dom.find('span').on("click", function () {
var $parent = $(this).parent(".light-switch")
if ($parent.attr('switch-val') == 'on'){
$parent.attr('switch-val', 'off')
$dom.removeClass('on')
} else {
$parent.attr('switch-val', 'on')
$dom.addClass('on')
}
})
})
}
this.render();
return scope
}
var mySwitchStation = switchStation()