Heapcoding

Need web development help/service?

Hire me: umar.bwn@gmail.com

How to create a play button in CSS – 1 Best Way

Published October 29, 2022

In this tutorial I shall teach you how to create a play button in css. So without wasting your time let’s start the tutorial.

Step 1 – Create a blank html document

First of all, create a blank html document. And add some basic html tags that declare html documents.

In the screenshot below I have created a html5 document.

How to create a play button in CSS
How to create a play button in CSS

Step 2 – Create a button in html document

Now let’s create a simple button in the html document.

How to create a play button in CSS
How to create a play button in CSS

In the above screenshot you can see I have created a button and given a class “play-button” to it.

Now let’s look in the web browser to see how it looks.

How to create a play button in CSS
How to create a play button in CSS

In the above screenshot you can see our button is looking like a very small rectangle. 

Don’t worry about it, we are going to fix it now.

Step 3 – Style play button using css

Now let’s style our button that will look like a play button.

How to create a play button in CSS
How to create a play button in CSS

In the above screenshot you can see I have added some style to “play-button” class using css.

Now let’s render this in our web browser to see how it looks.

How to create a play button in CSS

In the above screenshot you can see a nice square rectangle is showing.

Now let’s style this button further to make the play button.

How to create a play button in CSS
How to create a play button in CSS

In the above screenshot you can see I have added a “:before” pseudo selector with a button and added some css properties to it and also given a different color of the border with the width of 15px (half of the button width and height).

Now let’s see how this looks in the browser.

How to create a play button in CSS

In the above screenshot you can see a beautiful box with 4 different colors.

Now here the trick begins.

When you give a border of equal width to all 4 sides with zero width then all 4 borders appear.

Now we shall remove all sides of borders except the left border.

Now let’s see how we do this.

How to create a play button in CSS

In the above screenshot you can see, nothing has been changed except the colors of the borders ( highlighted in red border).

Now let’s see how this will look like in the browser.

How to create a play button in CSS

In the above screenshot you can see a nice play button has appeared. Now let’s style a little bit more to make it a real play button.

How to create a play button in CSS

In the above screenshot you can see I have added two properties to remove the background and border of the button.

So that our button could look like a play button.

Now let’s see in the web browser, how these changes look like.

How to create a play button in CSS

In the above screenshot you can see our play button is completed. 

But there is one problem.

When you mouse over the button, the cursor doesn’t change so it doesn’t feel like a button.

Now let’s give one more property to change cursor to pointer.

How to create a play button in CSS

In the above screenshot you can see I have added a property in the “:before” selector of the button to change the cursor.

That’s all, hope you like the tutorial.