我为html按钮创建了一段代码，该代码链接到我所做的网站。
我按照w3学校教程进行了操作。
在使用Chrome，Edge和Safari浏览时，它可以正常工作，不幸的是，对于Internet Explorer 11和Firefox Quantum（58.0），情况并非如此...
更清楚地说，该按钮正确显示，但是单击它不会加载网站页面。
这是我的代码：
<!DOCTYPE html>
<head>
<style type="text/css">
.bluebutton {
padding: 10px;
width: 100%;
font-size: 200%;
margin-left: auto;
margin-right: auto;
background-color: #337ab7;
border-radius: 7px;
box-shadow: 0 5px 20px 0 rgba(0,0,0,0.2), 0 3px 20px 0 rgba(0,0,0,0.05);
}
.bluebutton:hover {background-color: #3e8e41}
.bluebutton:active {
background-color: #3e8e41;
transform: translateY(5px);
}
.bluebutton span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.bluebutton span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.bluebutton:hover span {
padding-right: 25px;
}
.bluebutton:hover span:after {
opacity: 1;
right: 0;
}
</style>
</head>
<body>
<button class="bluebutton">
<a href="https://www.youtube.com" style="color: white">
<span>Access Website</span>
</a>
</button>
</body>
</html>
如果可能的话，我想将css样式部分保留在html代码中。
谢谢您的帮助。
最好的祝福，
最佳答案
您可以轻松地对<a>标记进行大多数按钮自定义，而无需使用<button>标记。