制作一个透明的播放按钮图标，就像airbnb网站上的一样

Question

我是web开发的新手，我正在尝试制作一个网站，在div内循环视频，就像这个网站:https://www.airbnb.com/?af=43720035&c=A_TC%3D5deb8yxasn%26G_MT%3De%26G_CR%3D89719542383%26G_N%3Dg%26G_K%3Dairbnb%26G_P%3D%26G_D%3Dc&gclid=CKDKlI7rx84CFaYy0wodFLQBCg&dclid=CN3MsY7rx84CFaox0wodEZEGFg

一切顺利，但我不知道如何创建播放按钮在中间，透明度和所有?没有那么多的javascript和功能，但只是按钮本身，有人知道什么将是最明智的路线，使一个?由于

Answer 1

看起来像一个图标对我来说，也许尝试像字体awesome。然后用CSS样式(颜色，不透明度等)http://fontawesome.io/icons/

Answer 2

你的链接不再工作，所以，这是一个有根据的猜测，你想要什么，但这里的代码创建一个透明的播放按钮。

.transparentPlayButton {
    width:120px; height:120px;
    overflow:hidden;
    position:relative;
    margin:0 auto;
    border-radius:100%;
    z-index:1;
}
.transparentPlayButton:before,
.transparentPlayButton:after{
    content:'';
    position:absolute;    
}
.transparentPlayButton:before{   
    top:20px; left:40px;
    width: 0; 
    height: 0; 
    border-top: 40px solid black;
    border-bottom: 40px solid black;
    border-left: 60px solid transparent;
    box-shadow: 0px 0px 0px 9999px #000;
    z-index:-1;
    transition: all 0.25s ease-in-out;
}
.transparentPlayButton:hover:before {
    box-shadow: 0px 0px 0px 9999px #cc3333;
    border-top: 40px solid #cc3333;
    border-bottom: 40px solid #cc3333;
}
.transparentPlayButton:after{
    top:0;left:0;
    width:100%; height:100%;
}

小提琴。