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

Question

[My1Name]

Нашёл на просторах интернета кнопку "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;
}

Как можно упростить этот код?

Comments

[ProjectSoft]

Без ::before и ::after она потеряет свой вид.
А чтобы отключить :hover просто удалите блок кода .play:hover

[My1Name]

ProjectSoft, проблема в том, что треугольник внутри красного квадратика нарисован с помощью стилей border описанных в :after и :before Чтобы их удалить, единственный вариант который я придумал - использовать span блок внутри play с glyphicon (bootstrap). Но, думал можно сделать тоже самое как-то проще; с помощью стилей.

[ProjectSoft]

My1Name,
1 - это ни только треугольник.
2 -чем вам не нравится ::before и ::after?

[My1Name]

ProjectSoft, слишком много текста для такой простой кнопки : )

[ProjectSoft]

My1Name, )))
Самый простой способ

[My1Name]

ProjectSoft, я так понимаю - вы профессионал своего дела (frontend)? - У меня есть логичный вопрос: Чем такое решение (svg) хуже или лучше чистого css? На мой взгляд, ваше решение выглядит красиво и лучше.

Уберите свой ответ с комментариев. Я отмечу его решением.

[ProjectSoft]

My1Name,

frontend

Я ни только фронтенд или бэкенд.

SVG, конечно, имеет свои плюсы и минусы, но плюсов на столько больше, что о минусах и говорить не хочется.))) Я имею введу только его векторное представление не содержащее графические элементы. Лёгкость SVG (сам вес файла), лёгкость в представлении data, где по сути это энкодированный url содержимого файла, но можно и в base64

base64

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MDcgNTY3IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KCTxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjRkZGIiBkPSJtMzIzLjcgMzg2LjctLjItMjIzLjcgMjE0LjQgMTEyLjd6Ii8+Cgk8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI0ZGMDAwMiIgZD0iTTMyMy41IDE2M3YyMjQuNVYxNjNjNzkgNDIuOCAyMTQuNCAxMTIuOCAyMTQuNCAxMTIuOHMtMTM0LjcgNzAuOC0yMTQuNCAxMTEuN003NjcuNiA1MS4zYy0xMy43LTE4LjEtMzcuMi0zMi4yLTYyLjEtMzYuOS03My4zLTEzLjktNTMwLjctMTMuOS02MDQgMC0yMCAzLjgtMzcuOCAxMi44LTUzLjEgMjYuOUMtMTYgMTAxLjIgNC4yIDQyMi4xIDE5LjcgNDc0YzYuNSAyMi41IDE1IDM4LjcgMjUuNiA0OS40IDEzLjcgMTQuMSAzMi41IDIzLjggNTQgMjguMSA2MC40IDEyLjUgMzcxLjMgMTkuNSA2MDQuOSAxLjkgMjEuNS0zLjggNDAuNi0xMy44IDU1LjYtMjguNCA1OS42LTU5LjYgNTUuNi0zOTguNSA3LjgtNDczLjciLz4KPC9zdmc+

Если сравнить длину строк data:image/svg+xml, и data:image/svg+xml;base64,, то вы увидите, что первый вариант короче второго, а значит исходный вес файла CSS меньше. Плюс выделение ресурсов на декодирование меньше.
То, что ни все устройства поддерживают SVG - это временный минус, который стремительно переходит в плюс. Не поддерживающие устройства это старые устройства со старыми операционными системами. Мы же уже никто не говорим о поддержке IE под win7 или xp ? Ведь это прошлый век. И поддерживать данные продукты просто нет смысла если мы хотим идти вперёд. Так что тем самым мы заставляем пользователя сменить устройство. Может он или нет - это его проблемы, как бы это не звучало, но это правда.

Answer 1

[Вова Дружаев]

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

Comments

[My1Name]

Прикольно.
У меня эта кнопка на столько маленькая и не значительная, что я не стал заморачиваться с закруглениями и сделал её тупо квадратной.

HTML
<div class="play play-r">►</div>

CSS

.play { 
  background: red;
  border-radius: 4.5px;
  color: #FFFFFF;
  height: 1.6em;
  text-align: center;
  margin-left: 5px;
  margin-top: 3px;
  width: 2.2em;
}
.play-r {
  font-size: 7pt;
  opacity: 0.85;
  padding-left: 1px;
  padding-top: 1px;
}

Я даже не вынес в отдельный блок - класс play-r со свойством прозрачности для треугольника)) Если честно, то я обратил внимание на выпуклость кнопки только после того, как задал вопрос.