Простая кнопка воспроизведения/паузы с помощью CSS

Создание простой кнопки воспроизведения с эффектом наведения с помощью CSS.

Для получения дополнительной информации о кнопках Play/Pause посетите сайт — https://xcattx.com/css-play-pause-buttons/.

Сначала создайте файл Index.html в редакторе кода.

Введите основной формат html.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
</style>
</head>
<body>
</body>
</html>

Вход в полноэкранный режим Выйдите из полноэкранного режима

Создайте основной контейнер Div.

  <div class="box"></div>

Войдите в полноэкранный режим Выход из полноэкранного режима

Создайте кнопку Play / Pause, используя метку и флажок.

Теперь html-часть готова, переходим к стилизации. Сначала введите основные стили.

*, *:before, *:after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  background: #eff6d3;
  background-image: linear-gradient(-90deg, #255F3A, #26255F);
}

Войти в полноэкранный режим Выход из полноэкранного режима

Теперь стилизуем контейнер коробки.

.box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 80px;
  margin: auto;
}

Войти в полноэкранный режим Выход из полноэкранного режима

Стилизация кнопки воспроизведения/паузы.

.play-button {
  display: block;
  position: relative;
  width: 80px;
  height: 80px;
  margin: auto;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.play-button input[type=checkbox] {
  display: none;
}

Вход в полноэкранный режим Выход из полноэкранного режима

Придание кнопке эффекта щелчка, чтобы при щелчке кнопка менялась с паузы на значок воспроизведения.

.play-button input[type=checkbox]:checked ~ span::before, .play-button input[type=checkbox]:checked ~ span::after {
  border: 20px solid transparent;
  border-left: 40px solid #fff;
  border-right: 0;
}
.play-button input[type=checkbox]:checked ~ span::after {
  transform: translateY(-50%) scaleY(0.5);
}
.play-button span {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 40px;
  height: 40px;
}
.play-button span::before, .play-button span::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  border: 0 solid transparent;
  border-left: 16px solid #fff;
  transition: all 0.4s ease;
}
.play-button span::before {
  left: 0;
}
.play-button span::after {
  right: 0;
}

Вход в полноэкранный режим Выход из полноэкранного режима

Вот и все, результат будет следующим.

Полный код —

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
/* Variables
   ================================ */
/* Base
   ================================ */
*, *:before, *:after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  background: #eff6d3;
  background-image: linear-gradient(-90deg, #255F3A, #26255F);
}

/* Main
   ================================ */
.box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 80px;
  margin: auto;
}

.play-button {
  display: block;
  position: relative;
  width: 80px;
  height: 80px;
  margin: auto;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.play-button input[type=checkbox] {
  display: none;
}
.play-button input[type=checkbox]:checked ~ span::before, .play-button input[type=checkbox]:checked ~ span::after {
  border: 20px solid transparent;
  border-left: 40px solid #fff;
  border-right: 0;
}
.play-button input[type=checkbox]:checked ~ span::after {
  transform: translateY(-50%) scaleY(0.5);
}
.play-button span {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 40px;
  height: 40px;
}
.play-button span::before, .play-button span::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  border: 0 solid transparent;
  border-left: 16px solid #fff;
  transition: all 0.4s ease;
}
.play-button span::before {
  left: 0;
}
.play-button span::after {
  right: 0;
}
</style>
</head>
<body>
  <div class="box">
  <label class="play-button"><input type="checkbox"><span></span></label>
</div>
</body>
</html>

Вход в полноэкранный режим Выход из полноэкранного режима