ساخت استایلی زیبا برای دکمه پخش ویدیو

با سلام خدمت تمامی دوستان عزیز . امروز با یک سری دیگه از آموزش ها خدمت شما دوستان هستیم . امروز من براتون یک استایل بسیار بسیار زیبا برای دکمه پخش ویدیو آماده کردم . . . امیدوارم مفید باشه براتون …

کدهای HTML :

[php]
<div id="container">
<div class="play">
▶
</div>
</div>
[/php]

کدهای CSS :

[css]
#container {
position: relative;
background: url("http://s7.picofile.com/file/8265673150/photos_of_dolphin_9513.jpg") no-repeat;
background-size: cover;
width: 400px;
height: 300px;
overflow: hidden;
}
.play {
cursor: pointer;
box-sizing: border-box;
position: absolute;
margin: auto;
padding-left: 5px;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 60px;
height: 60px;
line-height: 60px;
font-size: 24px;
text-align: center;
color: #fff;
border-radius: 50%;
box-shadow: inset 0 0 0 1px #fff, 0 0 0 0 #fff;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.play:after {
position: absolute;
content: "";
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
border-radius: 50%;
box-shadow: inset 0 0 0 2px #fff;
}
.play:hover {
box-shadow: inset 0 0 0 60px #fff, 0 0 0 2px #fff;
color: #00B5EF;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.play:hover:after {
box-shadow: inset 0 0 0 1px #fff, 0 0 0 0 #fff;
}
[/css]