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

由 发布于

这是我的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;
}

But the thing is the button keeps on appearing weirdly like this: click here to see preview

It would be greatly appreciated if someone can help me fix this and make it so the default white area is gone and instead looks something like this: click here to see preview

谢谢 ：）