css 播放器按钮实现

//播放按钮
<div id="playBtn" class="circle" style="margin: 20px 0px 10px 20px;">
<div class="circle_inner_play">
</div>
</div>

//暂停按钮
<div id="pauseBtn" class="circle" style="margin: 20px 0px 10px 85px;">
<div class="circle_inner_pause">
▐▐
</div>
</div>

//重置按钮
<div id="resetBtn" class="circle" style="margin: 20px 0px 10px 150px;">
<div class="circle_inner_reset">
</div>
</div>

.circle {
border: solid 1px #23527C;
border-radius: 50px;
height: 50px;
position: absolute;
width: 50px;
}

.circle:hover {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
}

.circle_inner_play {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent #23527C;
position: absolute;
top: 50%;
left: 50%;
margin: -10px 0 0 -7px;
}

.circle_inner_pause {
position: absolute;
top: 50%;
left: 50%;
margin-left: -12px;
margin-top: -10px;
color: #23527C;
}

.circle_inner_reset {
width: 18px;
height: 18px;
background-color: #23527C;
margin: -9px 0 0 -9px;
position: absolute;
top: 50%;
left: 50%;
}