Simple Play/Pause Button using CSS

#css #webdev #beginners #tutorial

Making a Simple Play Button with hover effect using CSS.

For more Play/Pause Buttons visit - https://xcattx.com/css-play-pause-buttons/

First create the Index.html file in a code editor.

Enter the basic html format.

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

Create the main Div Container.

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

Create the Play / Pause button using label and a checkbox.

Now the html part is done, moving to styling. First enter the basic styling.

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

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

Now styling the box container.

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

Styling the Play/Pause button.

.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;
}

Giving the Button click effect, so the button changes from pause to play icon on clicking.

.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;
}

That's it, the output will be the following.

Full Code -

<!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>