CSS实现播放暂停按钮样式

播放按钮常见形式为三角形，CSS绘制三角形主要用到了border-width属性，他可以定义四个边框各个的宽度。

播放样式代码：

button{
    padding: 0;
    background-color: white;
    box-sizing: border-box;
}
.play{
    height: 74px;
    border-style: solid;
    border-width: 37px 0 37px 60px;
    border-color: transparent transparent transparent black;
}

效果：

暂停按钮常见样式为两个竖线，实现这个效果用到了border-style的一个属性值double，意为双边框

暂停按钮样式代码：

button{
    padding: 0;
    background-color: white;
    box-sizing: border-box;
}
.pause{
    width: 74px;
    height: 74px;
    border-style: double;
    border-width: 0px 0px 0px 60px;
    border-color: #202020;
}

效果：

鼠标悬浮切换按钮样式：

button{
    padding: 0;
    background-color: white;
    box-sizing: border-box;
}
.play{
    height: 74px;
    border-style: solid;
    border-width: 37px 0 37px 60px;
    border-color: transparent transparent transparent black;
    transition: all .5s ease;
}
.play:hover{
    border-style: double;
    border-width: 0px 0px 0px 60px;
}

效果：

使用CSS不仅可以绘制三角形，还有很多常见图形，可参考：http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet

代码地址：https://github.com/justforuse/HTML-CSS-JS/tree/master/play-pause
参考链接： https://css-tricks.com/making-pure-css-playpause-button/