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

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

کدهای HTML :

	<div id="container">
	  <div class="play">
	    ▶ 
	  </div>
	</div>

کدهای 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;
		}

همچنین قابل HTML اشم براتون قرار میدم که اگه دوست داشته باشید دانلود کنید و داشته باشیدش … امیدوارم از این مطلب لذت برده باشید .