How to Make an HTML Button Without Border

You can make a button without borders in HTML. To remove them, you have to use the border property in CSS and set it to none.

You can use two methods to achieve this:

1. Remove border on HTML button using CSS

First, you can create a button using the <button></button> HTML tags.

HTML code:

<button class=”button-solid”>Button without border</button>

Then, you remove the border on the button using the following CSS code.

CSS code:

.button-solid {
    border: none;
}
button-solid:focus {
    border: none;
    outline: none;
}

2. Creating a button without a border using a link element

Using the second method, you first create a link using HTML.

HTML code:

<a href="#" class=”button-solid”>Button without border</a>

Then, you can style the link to look like a button.

CSS code:

button-solid {
  padding: 5px 10px;
  background-color: #ddd;
  color: #000;
}

How to Remove the Border on Clicked Buttons

You might find that your button does not have a border. But when clicked, a border appears on the button. You can remove that border by applying the following CSS code on the button.

.button-solid:focus {
    border: none;
    outline: none;
}

Conclusion

Which method are you going to use to create buttons without borders?