How can i get rid of the line under the text of a button

August 12, 2023

I have this one button which has some sort of line under it.

it’s small and blue but it annoys me.

#p {
  position: relative;
  top: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 100px;
  width: 55%;
  font-size: 30px;
  font-family: 'Bitter', serif;
  color: #588b42;
  border: none;
  background-color: #1a1a19;
}

#p:hover,
#p:visited,
#p:link,
#p:active {
  text-decoration: none;
}

<a href="portfolio.html" target="_blank"><button id="p">Portfolio</button></a>

I tried to set text-decoration to none, both in the normal style for the button and in every single pseudo-class, but it has not done anything

This is what i’ve tried:

#p{text-decoration: none;}

#p:hover, #p:visited, #p:link, #p:active {text-decoration: none;}

>Solution :

The line comes from the anchor, not the button, and all your selectors are targeting the button with the ID of p. So you need a{text-decoration: none;}.

But note that a button in an anchor is invalid HTML