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.
Step 2 – Create a button in html document
Now let’s create a simple button in the html document.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.