how to clear black dash in html button? - html

Question

I don't know how to describe my problem but look at my output you'll get an idea. I
googled about my problem but i couldn't found the solution.
.btn1 {
font-family: 'Times New Roman', Times, serif;
margin-right: 0px;
width: 100px;
height: 30px;
font-size: 17px;
font-weight: 200;
background-color: #f7e7e7;
color: rgb(49, 126, 126);
border-radius: 5px;
border: 1px solid rgb(186, 230, 173);
box-shadow: 3px 3px rgb(98, 151, 98);
}
<div>
<a href="#">
<button class="btn1">Home</button>
</a>
<a href="product.html">
<button class="btn2">Products</button>
</a>
<a href="#">
<button class="btn3">Buy Now</button>
</a>
<a href="findus.html">
<button class="btn4">Find us</button>
</a>
</div>
Every button have same code in CSS.
Can you please tell, what am i doing wrong?
Thank you.

Answer 1

You have unnecessarily wrapped each of your <button>s in an <a> tag and this is the browser's default underline style of the <a> tag that you can see.
Note: Some of the other answers suggest simply hiding the underline, but wrapping a <button> in an <a> is considered to be an anti-pattern that should be avoided.
Links
.btn1 {
font-family: 'Times New Roman', Times, serif;
margin-right: 0px;
width: 100px;
height: 30px;
font-size: 17px;
font-weight: 200;
background-color: #f7e7e7;
color: rgb(49, 126, 126);
border-radius: 5px;
border: 1px solid rgb(186, 230, 173);
box-shadow: 3px 3px rgb(98, 151, 98);
text-decoration: none;
}
<div>
<a class="btn1" href="#">Home</a>
<a class="btn1" href="product.html">Products</a>
<a class="btn1" href="#">Buy Now</a>
<a class="btn1" href="findus.html">Find us</a>
</div>
Buttons
.btn1 {
font-family: 'Times New Roman', Times, serif;
margin-right: 0px;
width: 100px;
height: 30px;
font-size: 17px;
font-weight: 200;
background-color: #f7e7e7;
color: rgb(49, 126, 126);
border-radius: 5px;
border: 1px solid rgb(186, 230, 173);
box-shadow: 3px 3px rgb(98, 151, 98);
}
<div>
<button class="btn1">Home</button>
<button class="btn2">Products</button>
<button class="btn3">Buy Now</button>
<button class="btn4">Find us</button>
</div>
You can read about links vs buttons, and why you might choose one over the other here.

Answer 2

The dashes you are seeing are actually the default underline that accompanies anchor elements. All you need to add is:
a {
text-decoration: none;
}
That being said, nesting button elements inside of anchor elements is invalid HTML and should be avoided.

Answer 3

Replace a with button or use css rule text-decoration: none

Answer 4

.btn {
font-family: "Times New Roman", Times, serif;
margin: 10px;
padding:10px;
width: 100px;
height: 30px;
font-size: 17px;
font-weight: 200;
background-color: #f7e7e7;
color: rgb(49, 126, 126);
border-radius: 5px;
border: 1px solid rgb(186, 230, 173);
box-shadow: 3px 3px rgb(98, 151, 98);
}
a
{
text-decoration:none;
color: black;
}
<div>
<a href="#" class="btn">
Home
</a>
<a href="product.html" class="btn">
Product
</a>
<a href="#" class="btn">
buy now
</a>
<a href="findus.html" class="btn">
find us
</a>
</div>