Simple Play/Pause Button using CSS
Tags: css, webdev, beginners, tutorial
Published: 2022-07-24 06:35:06

Making a Simple Play Button with hover effect using CSS.

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

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

Enter the basic html format.

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

Create the main Div Container.

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

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

<label class="play-button"><input type="checkbox"><span></span></label>

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

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

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

Now styling the box container.

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

Styling the Play/Pause button. 

```css
.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.

```css
.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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lttvgwdgi2nw311q060j.gif)

Full Code - 

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