@My1Name

Как сделать кнопку «play» как в YouTube?

Нашёл на просторах интернета кнопку "play" в стиле YouTube. Проблема заключается в том, что она слишком "умная". То есть, при наведении она меняет цвет и вроде ничего особенного. Но, мне нужно сделать её гораздо проще, без свойств hover, before и after. Всё просто и должно вместиться в один блок:
.play { 
  background: red;
  border-radius: 50% / 10%;
  color: #FFFFFF;
  font-size: 0.36em;
  height: 3em;
  padding: 0;
  position: relative;
  text-align: center;
  text-indent: 0.1em;
  transition: all 150ms ease-out;
  margin-left: 5px;
  margin-top: 3px;
  width: 4em;
}

Как можно упростить этот код?
  • Вопрос задан
  • 128 просмотров
Решения вопроса 1
OtshelnikFm
@OtshelnikFm
Обо мне расскажет yawncato.com
Упростил https://codepen.io/Otshelnik-Fm/pen/rNRbKKv
Это один блок. псевдоселлекторы before и after не создают дополнительно в дом дереве. Так что это все еще один dom элемент.
Если нужно еще проще - в background закодируй svg иконку ютуб кнопки. Но вес будет больше. Тут оптимальный вариант соотношения веса и без запроса к иконке
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы