[分享]css3播放按钮

CSS3是HTML与JavaScript的补充，它的出现使得网页设计更加美观与简洁。本文主要介绍如何利用CSS3制作一个漂亮的播放按钮。

.play-button {
    width: 80px;
    height: 80px;
    background-color: #D93025;
    border-radius: 50%;
    position: relative;
    box-shadow: 0px 4px 0px #C3271F;
}

.play-button::after {
    content: "";
    position: absolute;
    top: 25px;
    left: 35px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-left: 30px solid #FFF;
    border-bottom: 20px solid transparent;
}

.play-button::before {
    content: "";
    position: absolute;
    top: 30px;
    left: 48px;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-left: 20px solid #D93025;
    border-bottom: 15px solid transparent;
} 

代码中，我们首先定义了一个类名为play-button的元素，设定宽高为80px，并添加了圆角。接下来利用伪元素::after和::before分别制作三角形和矩形，用来表示播放键。最后将它们都绝对定位，使它们呈现在圆形元素的中心。

到此为止，我们就成功地制作出了一个漂亮的CSS3播放按钮，可以在网站中用来进行音视频播放或其他相关功能。除了这一种方法，还有许多其他方式可以制作出炫酷的按钮，希望大家可以在实践中寻找属于自己的设计灵感。