Create a play button with pure CSS

Have you ever thought of creating a play button with pure CSS? Well, it’s quite easy and anyone can create it with a little knowledge of CSS.

In this article, I will guide you through the simple steps of creating a play button with pure CSS. We will create a pause button as well with pure CSS only. So let’s get started.

There are four easy steps that we have to follow to create a play button. These are as follows:

• Create a thick border around the element. The thickness of the border must be greater than the element’s width and height.
• Set elements’ width and height to 0px.
• Set the thickness of the right border of the element to 0px and double the thickness of the element’s left border.
• Set the color of the top and bottom border of the element to transparent and your play button is ready.

Here are the visualization steps:

Here is a working example with all four steps:

Example:

.step1{
   border-left: 60px solid red;
   border-right: 60px solid green;
   border-top: 60px solid blue;
   border-bottom: 60px solid orange;   
   width: 40px;
   height: 40px;
}
.step2{
   border-left: 60px solid red;
   border-right: 60px solid green;
   border-top: 60px solid blue;
   border-bottom: 60px solid orange;  
   width: 0px;
   height: 0px;
}
.step3{
   border-left: 120px solid red;
   border-right: 0px solid green;
   border-top: 60px solid blue;
   border-bottom: 60px solid orange;   
   width: 0px;
   height: 0px;
}
.step4{
   border-left: 120px solid red;
   border-right: 0px solid green;
   border-top: 60px solid transparent;
   border-bottom: 60px solid transparent;  
   width: 0px;
   height: 0px;
}

Create a pause button with CSS

Creating a pause button is much simpler than creating a play button. We just have to follow two simple steps and we are done.

Here are the two steps to follow:

• Create a thick border around the element and keep its height higher and width smaller.
• Set the top and bottom border thickness to 0px and the pause button is ready.

Here are the visualization steps:

Example:

.step1{
    border-left: 20px solid red;
    border-right: 20px solid red;
    border-top: 20px solid green;
    border-bottom: 20px solid green;   
    width: 20px;
    height: 100px;
}
.step2{
    border-left: 20px solid red;
    border-right: 20px solid red;
    border-top: 0px solid green;
    border-bottom: 0px solid orange;   
    width: 20px;
    height: 100px;
}