How to Remove Button Border in HTML CSS
When we create a button in HTML it shows a border by default. Are you finding a solution to remove the button border in HTML? Here, in this tutorial, you’ll see two different methods to solve this problem. Let’s see.
Remove Button Border
Following are the two methods that you can use.
1- Remove the Button Border using CSS
CSS is the most efficient way to make buttons without borders in HTML. In this method, we are going to use the CSS border property. All you have to do is set the border to none for the desired button element.
In the following HTML code, I created two HTML buttons by using <button> tags to show the difference.
<body> <button>Button 1</button> <button class="btn-2">Button 2</button> </body>
Now, the below CSS code will remove the second button border with the class name btn-2.
.btn-2{ border: none; } .btn-2:focus{ border: none; outline: none; }
In the above code, I used the border and outline property and applied it to the second button. The outline property is not crucial but it helps sometimes when the HTML button shows the border on click it removes that border.
Remember, you should have a button created with <button> element in HTML to make the above CSS code work.
The above code output will look like this in your browser.
Tip: You can also remove the HTML button border of one or more sides using border-top, border-left, border-right, and border-bottom properties in CSS.
Here, you can learn more about CSS border property in detail.
2- Use HTML Link Element to Create a Button
Why don’t you use HTML <a> link element to create a button? It’s an easy way to make buttons in HTML without any borders. All you need is just a few lines of CSS code to convert a link into a button. Let’s see that.
First, create a link using HTML <a> tags.
<a href="#">Button with Link no border</a>
Now, the below CSS code will convert this link to a button without any border.
a{ text-decoration: none; padding: 8px 12px; color: #ffffff; background-color: #0066b8; }
The above code output will look like this below:
Also, you can learn more about HTML links in this guide.
So, this is how to remove the button border in HTML. If you have any questions then feel free to ask in the comments section below.
Tutorials Related to Buttons:
Help others by sharing this tutorial!
Topic: HTML
