Как сделать кнопку воспроизведения видео, как на YouTube?

Question

Ефим

css , html

Как сделать кнопку воспроизведения видео, как на YouTube?

Как можно убрать свойства `hover`, `before` и `after` из стилизации кнопки "play" в стиле YouTube, чтобы она стала более простой? Код должен быть описан в одном блоке стилей.

19 февраля 2024 г. 14:58

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для создания кнопки воспроизведения видео в стиле YouTube можно использовать следующий CSS код:

```css
.play-button {
  width: 80px;
  height: 80px;
  background-color: red;
  border: none;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.play-button::before {
  content: "\e901";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 40px;
  color: white;
}
```

Чтобы упростить стиль кнопки и убрать свойства `hover`, `before` и `after`, можно просто удалить соответствующие строки из блока стилей:

```css
.play-button {
  width: 80px;
  height: 80px;
  background-color: red;
  border: none;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
``` 

Теперь кнопка будет более простой, без эффектов `hover`, `before` и `after`.

Answer 2

Упростил https://codepen.io/Otshelnik-Fm/pen/rNRbKKv 
 Это один блок. псевдоселлекторы before и after не создают дополнительно в дом дереве. Так что это все еще один dom элемент. 
 Если нужно еще проще - в background закодируй svg иконку ютуб кнопки. Но вес будет больше. Тут оптимальный вариант соотношения веса и без запроса к иконке