Button Style is not working, linked to external css

This is my code for the button in 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>

Its Linked to this Stylesheet in 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

Thanks :)

Solution

Here we go. Just removed <button>, we don't need it here.

/*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>