Why does my button still have underlined text?-CodePudding

I'm Creating a button that links to Youtube, and the text inside the button doesn't respond to css code

I tried this html code:

<button class = "button"><a href = https://www.youtube.com>This is a button to youtube</a></button>

and this css:

.button {
  width:100px;
  height:100px;
  border-radius:12px;
  font-family: arial;
  color: black;
  font-size:15px;
  text-decoration: none;
  background-color:red;
  border-left: solid transparent;
  border-right: solid transparent;
  border-top: solid transparent;
  border-bottom: solid transparent;
  
  position:relative;
  top:10px;
}

CodePudding user response：

When applying your text styles, you have to select your a element, not your button element:

.button {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  background-color: red;
  border-left: solid transparent;
  border-right: solid transparent;
  border-top: solid transparent;
  border-bottom: solid transparent;
  position: relative;
  top: 10px;
}

.button > a {
  font-family: arial;
  color: black;
  font-size: 15px;
  text-decoration: none;
}

<button ><a href = https://www.youtube.com>This is a button to youtube</a></button>

CodePudding user response：

you dont need to use the button tag if you use a tag

<a href="https://www.youtube.com" >This is a button to youtube</a>

CodePudding user response：

use a tag, the browser has some default behavor. if you don't like, you can use javascript to navigator to youtube This is a button to youtube