为什么我的按钮仍然有下划线文本？

Question

我正在创建一个链接到 Youtube 的按钮，但按钮内的文本不响应 css 代码

我试过这个html代码：

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

这个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;
}

Answer 1

应用文本样式时，您必须选择 a 元素，而不是 button 元素：

.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 class="button"><a href = https://www.youtube.com>This is a button to youtube</a></button>

Answer 2

如果使用标签，则不需要使用按钮标签

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

Answer 3

使用标签，浏览器有一些默认行为。如果你不喜欢，你可以使用 JavaScript 导航到 youtube

<button class = "button" onclick="window.open('https://www.youtube.com', '_blank')">This is a button to youtube</button>