Стиль кнопок не работает, привязан к внешнему css - PullRequest
Новая
       30

Стиль кнопок не работает, привязан к внешнему css

1 голос
/ 09 мая 2020

Это мой код для кнопки в 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;
}

Но дело в том, что кнопка остается выглядит так странно: щелкните здесь, чтобы увидеть предварительный просмотр

Было бы очень признательно, если бы кто-нибудь помог мне исправить это и сделать так, чтобы белая область по умолчанию исчезла и вместо этого выглядела примерно так : нажмите здесь, чтобы просмотреть

Спасибо :)

1 Ответ

2 голосов
/ 09 мая 2020

Вот и go. Только что удалили <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>
...