Preface
Hey there! Wondering how to make a button in HTML? Don’t worry, We are here for you! In today’s post, we will define a button, link it with another page and add Stylings to it. We will also give hover effects to the button to make to more lively.
First of all, A <button> tag defines a clickable button into which you can have a text
How to make a Button in HTML
You can make a button by inserting a <button> tag
<button>Click here</button>And the result will be…
Add a link
Use the <a> to add a link
<a href="https://www.google.com/"> <button>Click here</button></a>Now that you added a link, The button will have a use. i.e The above code will take you to google page
Add Styles
Now lets use CSS to add style to the button. We don’t want a simple button, do we?
button {
background-color: cornflowerblue;
border-width: 0px;
border-radius: 13px;
color: white;
padding: 20px;
font-size: 30px;
}We gave the button a background color, removed border and gave it a border-radius, padding, and also changed the font-size to 30px
How to make a Button in HTML with Hover Effects
Hover Effect makes your button more lively, all you have to use the following code.
button:hover {
background-color: black;
color: white;
}BONUS : Open the link in a New Tab
Now lets use a HTML attribute in a way such that the button opens the link in new Tab
<a href="https://www.google.com/" target="_blank"> <button>Click here</button></a>When you add target="_blank" inside the <a> tag , It will open the link in a completely new tab and the pervious tab will remain the same!
To Sum Up..
In today’s post, we’ve discussed how to define a button using the <button> tag, we linked it with another page and added Stylings to it. We also saw how to give hover effects to the button.
If you are on your way to becoming a Web-developer, you might find our site really helpful. Hit this link for more HTML related posts
Check it out, it’s Simply the Best Code.