Услуги профессионального Битрикс-программиста

Значок плэй (треугольник) средствами css с тенью


.video-js .vjs-big-play-button {
  background: transparent;
  line-height: 0;
  height: 0;
  width: 0; 
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 0;
  cursor: pointer;
  opacity: 1;
  background-color: transparent;
  border-radius: 0;
  transition: none;
  border: 0;
  -webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  -moz-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  -o-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.video-js .vjs-big-play-button:after{
  content: "";
  font-size: 0;
  top: 0px;
  left: 0px;
  border: 21px solid transparent;
  border-left: 36px solid #fff;
  -webkit-filter: drop-shadow(0px 0px 1px rgba(0,0,0,.1));
  filter: drop-shadow(0px 0px 1px rgba(0,0,0,.1));
}
.video-js .vjs-big-play-button:before{
  content: "";
  font-size: 0;
  top: -35px;
  left: -9px;
  border: 40px solid transparent;
  border-left: 63px solid #2C77D2;
  -webkit-filter: drop-shadow(1px 1px 10px #000000);
  filter: drop-shadow(1px 1px 10px #000000);
  -webkit-transition: all 1s cubic-bezier(.25,.8,.25,1);
  -moz-transition: all 1s cubic-bezier(.25,.8,.25,1);
  -o-transition: all 1s cubic-bezier(.25,.8,.25,1);
  transition: all 1s cubic-bezier(.25,.8,.25,1);
}

.vjs-big-play-centered .vjs-big-play-button {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.video-js:hover .vjs-big-play-button,
.video-js .vjs-big-play-button:focus {
  outline: 0;
  border-color: transparent;
  background-color: transparent;
  background-color: transparent;
  transform: translate(-50%, -50%) scale(1.1);
  -webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  -moz-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  -o-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.video-js:hover .vjs-big-play-button:before{
  -webkit-filter: drop-shadow(1px 1px 15px #000000);
  filter: drop-shadow(1px 1px 15px #000000);
  border-left-color: #3A8CF0;
}
Вероника Малышева
Битрикс-программист
+7 (953) 585-13-09

Если пост был полезным, можете угостить меня "чашечкой кофе" :)
Сбер, Альфа: по номеру телефона +7 (953) 585-13-09.
Спасибо!
Смотреть все посты