效果如图
CSS
<style type="text/css">
.add-btn,.min-btn{
width:140px;
height:140px;
border-radius:8px;
background:#ccd0d4;
position:relative;
display:inline-block;
box-shadow:inset 0 0 35px 5px rgba(0,0,0,0.25),inset 0 2px 1px 1px rgba(255,255,255,0.9),inset 0 -2px 1px 0 rgba(0,0,0,0.25);
}
input{
opacity:0;
width:100%;
height:100%;
position:absolute;
z-index:999;
}
.btn{
position:absolute;
left:15%;
top:15%;
display:inline-block;
background:#ccd0d4;
width:96px;
height:96px;
border-radius:96px;
box-shadow:0 15px 25px -4px rgba(0,0,0,0.25),inset 0 -3px 4px -1px rgba(0,0,0,0.2),0 -10px 15px -1px rgba(255,255,255,0.6),inset 0 3px 4px -1px rgba(255,255,255,0.2),inset 0 0 5px 1px rgba(255,255,255,0.8),inset 0 20px 30px 0 rgba(255,255,255,0.2);
transition:all 0.3s;
}
.label{
position:absolute;
top:44px;
left:59px;
font-size:42px;
display:inline-block;
color:rgba(0,0,0,0.4);
text-shadow:1px 1px 4px #ccd0d4,0 0 0 rgba(0,0,0,0.8),1px 1px 1px #fff;
}
input:checked ~ .btn {
box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.4), inset 0 -8px 25px -1px rgba(255, 255, 255, 0.9), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 8px 20px 0 rgba(0, 0, 0, 0.2), inset 0 0 5px 1px rgba(255, 255, 255, 0.6);
}
input:checked ~ .label {
font-size: 40px;
color: rgba(0, 0, 0, 0.4);
}
.loading{
width:500px;
height:20px;
border-radius:20px;
border:1px solid #000;
background-color:#fff;
background-size: 50px 50px;
background-image:-webkit-linear-gradient(45deg,rgba(0,102,51,1) 25%,transparent 25%,transparent 50%,rgba(0,102,51,1) 50%,rgba(0,102,51,1) 75%,transparent 75%,transparent);
background-image:-moz-linear-gradient(45deg,rgba(0,102,51,1) 25%,transparent 25%,transparent 50%,rgba(0,102,51,1) 50%,rgba(0,102,51,1) 75%,transparent 75%,transparent);
background-image:linear-gradient(45deg,rgba(0,102,51,1) 25%,transparent 25%,transparent 50%,rgba(0,102,51,1) 50%,rgba(0,102,51,1) 75%,transparent 75%,transparent);
-webkit-animation:loading 0.5s linear infinite;
-moz-animation:loading 1.5s linear infinite;
animation:loading 1.5s linear infinite;
}
@-webkit-keyframes loading {
from {
background-position: 0 0;
}
to {
background-position: 160px 0px;
}
}
@-moz-keyframes loading {
from {
background-position: 0 0;
}
to {
background-position: 160px 0px;
}
}
@keyframes loading {
from {
background-position: 0 0;
}
to {
background-position: 160px 0px;
}
}
</style>
HTML
<div class="add-btn">
<input type="checkbox" />
<span class="btn"></span>
<span class="label">+</span>
</div>
<div class="min-btn">
<input type="checkbox" />
<span class="btn"></span>
<span class="label">-</span>
</div>
<div class="loading">
</div>