How to make div as button in html?

You are taught by HTML books to make a button using the <button> tag. But you’ll soon be disappointed in real world because you can hardly find a button created by <button>. They create buttons using div or a tag. One reason is the button created by <button> has an outdated outlook, which can only be found on apps made 10 years ago. Another reason is they often make anchor tag as button to benefit from the features of a tag.

A button is nothing but an (usually rectangle) area with color outstanding from the rest of the page. So to make a div as a button, you need to set the background color of the div different from its surrounding content. Buttons often feature a special cursor shape such as a hand icon to indicate you can click on it. So, to change an ordinary div to a button, you need to set some css properties as follows:

<html>
<head>

</head>
<body> 
<div style="background-color:red;width:100px;height:100px;cursor:pointer;text-align:center;line-height:100px;">
Subscribe
</div>
</body>
</html>

In the above example, we create a red button of size 100*100px. If you hover mouse pointer over it, the cursor will become a hand shape.We also use the tex-align and line-height to center the text on the button. The appearance of the button is :

The div looks like a button now. But if you click on it, nothing happens. A more useful button can be obtained by changing a link to a button. Ordinary <a> tag does not look like a button because it has no background color. We can add background to a tag to make it look more like a button:

<html>
<head>

</head>
<body> 
<a style="background-color:red;" href="https://myprogrammingnotes.com">button</a>
</body>
</html>

It looks like:

There are some defects on the button. First, it has an underline under the (anchor) text. We can remove the underline from the hyperlink using the “text-decoration: none;” css property. Second, the button area is too small. We can make the button bigger by adding some padding to the anchor tag.

<html>
<head>

</head>
<body> 
<a style="background-color:red;text-decoration: none;padding:50px;text-align:center;" href="https://myprogrammingnotes.com">button</a>
Subscribe
</div>-->
</body>
</html>

The problem is that the text on the button cannot be aligned middle vertically.

To center the text on the button, we need to embed the a tag inside a div tag and apply the “display:table”/”display:table-cell” css properties:

<html>
<head>

</head>
<body> 
<div style="display:table;">
<a style="display:table-cell;background-color:red;text-decoration: none;padding:50px;text-align:center;" href="https://myprogrammingnotes.com">button</a>
</div>
</body>
</html>

Now we’ve successfully created a button with a link in html, and it looks like: