css 播放暂停按钮实现_html/css_WEB-ITnose

效果图

 

 

 

 

html代码

//播放按钮     <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>

　　

css

.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%;          }