按钮样式不起作用，链接到外部 css

Question

这是我在 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

谢谢:)

Answer 1

我们开始吧。刚刚删除<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>

按钮样式不起作用，链接到外部 css

Button Style is not working, linked to external css

html

css

button

web-site-project