这是我的HTML按钮代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./Styles/main.css" />
</head>
<body>
<a href="bells.html" class="buttonEnterClasses"> <button>Enter Classes</button></a>
</body>
</html>
它已在CSS中链接到此样式表：
/*CSS for the Enter Classes Button in Index.Html*/
.buttonEnterClasses{
text-align: center;
background-color: #d5a32d !important;
color: #fff !important;
border: 1px solid transparent;
border-radius: 4px;
margin: 0;
margin-top: 0px;
margin-bottom: 0px;
border: none;
border-radius: 5px;
overflow: visible;
font: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
text-transform: none;
display: inline-block;
box-sizing: border-box;
padding: 0 30px;
vertical-align: middle;
font-size: .875rem;
line-height: 38px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: .1s ease-in-out;
transition-property: all;
transition-property: color,background-color,border-color;
touch-action: manipulation;
}
.buttonEnterClasses a:hover {
opacity:1;
}
但是问题是按钮一直像这样奇怪地出现：click here to see preview
如果有人可以帮助我修复此问题并使其成为默认空白区域，而看起来像这样，将不胜感激：click here to see preview
谢谢：）
<button>，我们在这里不需要它。 /*CSS for the Enter Classes Button in Index.Html*/
.buttonEnterClasses{
text-align: center;
background-color: #d5a32d !important;
color: #fff !important;
border: 1px solid transparent;
border-radius: 4px;
margin: 0;
margin-top: 0px;
margin-bottom: 0px;
border: none;
border-radius: 5px;
overflow: visible;
font-family: Arial, Helvetica, sans-serif;
font-size: inherit;
line-height: inherit;
color: inherit;
text-transform: none;
display: inline-block;
box-sizing: border-box;
padding: 0 30px;
vertical-align: middle;
font-size: .875rem;
line-height: 38px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: .1s ease-in-out;
transition-property: all;
transition-property: color,background-color,border-color;
touch-action: manipulation;
}
.buttonEnterClasses a:hover {
opacity:1;
}<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./Styles/main.css" />
</head>
<body>
<a href="bells.html" class="buttonEnterClasses">Enter Classes</a>
</body>
</html><button>标签，您只需将样式直接应用于<a>标签： /*CSS for the Enter Classes Button in Index.Html*/
.buttonEnterClasses {
text-align: center;
background-color: #d5a32d !important;
color: #fff !important;
border: 1px solid transparent;
border-radius: 4px;
margin: 0;
margin-top: 0px;
margin-bottom: 0px;
border: none;
border-radius: 5px;
overflow: visible;
font: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
text-transform: none;
display: inline-block;
box-sizing: border-box;
padding: 0 30px;
vertical-align: middle;
font-size: .875rem;
line-height: 38px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: .1s ease-in-out;
transition-property: all;
transition-property: color,background-color,border- color;
touch-action: manipulation;
}<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./Styles/main.css" />
</head>
<body>
<a href="bells.html" class="buttonEnterClasses">Enter Classes</a>
</body>
</html>