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

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

如果你使用了标签

你就不需要使用button标签了

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

Answer 2

当应用你的文本样式时，你必须选择你的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 3

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

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