Стилизация кнопок в bootstrap

157

11 ноября 2019, 13:30

Такая проблема кнопки в навигации bootstrap отказываются принимать некоторые стили. А именно не меняется фон при наведении на кнопку (при замене градиентового фона в .btn:hover на черный, не скругляются углы и не работает transition).

@media only screen and (max-width: 992px) { 
  .info { 
    display: none; 
  } 
  a.hidden-logo { 
    display: flex; 
  } 
} 
 
.info { 
  width: 100%; 
  margin-left: 0px; 
  height: 80px; 
  background-image: url(images/banner.png); 
  background-position: center; 
  border-top-left-radius: 15px; 
  border-top-right-radius: 15px; 
} 
 
nav { 
  display: flex; 
  background: linear-gradient(180deg, #00aeef, rgb(79, 195, 238), #c0e7f5); 
  justify-content: center; 
  border-bottom-left-radius: 15px; 
  border-bottom-right-radius: 15px; 
  max-height: 60px; 
  box-shadow: 0px 3px 2px grey; 
} 
 
a.hidden-logo { 
  display: none; 
} 
 
.navbar-brand { 
  font-size: 32px; 
  outline: none; 
} 
 
.fbt { 
  border-width: 1px 0px 1px 1px; 
  border-radius: 0px 0px 0px 15px; 
} 
 
.mbt { 
  border-width: 1px 0px 1px 0px; 
  border-radius: 0px; 
} 
 
.lbt { 
  border-width: 1px 1px 1px 0px; 
  border-radius: 0px 0px 15px 0px; 
} 
 
.btn { 
  width: 150px; 
  background: linear-gradient(180deg, #00aeef, rgb(79, 195, 238), #c0e7f5); 
  box-shadow: 0px 3px 2px grey; 
} 
 
.btn:hover { 
  background: linear-gradient(180deg, #00aeef, rgb(193, 236, 252), #c0e7f5); 
  border-radius: 30px !important; 
  transition: all 10s ease !important; 
} 
 
.dropdown-menu { 
  background: linear-gradient(180deg, #00aeef, rgb(79, 195, 238), #c0e7f5); 
  border-radius: 10px; 
}

<!DOCTYPE html> 
<html lang="ru"> 
 
<head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 
   
  <link rel="stylesheet" href="style.css" /> 
  <link rel="stylesheet" href="media-queries.css" /> 
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> 
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
  <title>Document</title> 
</head> 
<header> 
  <div class="container"> 
    <div class="info"> 
      <div class="navbar-brand ml-4 mt-1" href="#"> 
        <img src="images/logo.png" style="height: 65px" /> Skynet 
      </div> 
    </div> 
    <nav class="navbar navbar-expand-lg navbar-light"> 
      <a class="navbar-brand ml-3 hidden-logo" href="#"> 
        <img src="images/logo.png" style="width: 13px; height: 30px;" />Skynet</a> 
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsiblenavbar"> 
          <span class="navbar-toggler-icon"></span> 
        </button> 
      <div class="collapse navbar-collapse mx-auto mb-2" id="collapsiblenavbar"> 
        <ul class="navbar-nav mx-auto"> 
          <button type="button" class="btn fbt btn-primary mb-1"> 
              <li class="nav-item"><a class="nav-link" href="#">Главная</a></li> 
            </button> 
 
          <button type="button" class="btn mbt btn-primary mb-1"> 
              <li class="nav-item"><a class="nav-link" href="#">Каталог</a></li> 
            </button> 
 
          <button type="button" class="btn mbt btn-primary mb-1"> 
              <li class="nav-item"><a class="nav-link" href="#">Услуги</a></li> 
            </button> 
          <button type="button" class="btn lbt btn-primary mb-1"> 
              <li class="nav-item dropdown"> 
                <a 
                  class="nav-link dropdown-toggle" 
                  href="#" 
                  id="navbardrop" 
                  data-toggle="dropdown" 
                  >Тарифы</a 
                > 
                <div class="dropdown-menu"> 
                  <a class="dropdown-item" href="#">Link 1</a> 
                  <a class="dropdown-item" href="#">Link 2</a> 
                  <a class="dropdown-item" href="#">Link 3</a> 
                </div> 
              </li> 
            </button> 
        </ul> 
      </div> 
    </nav> 
  </div> 
</header> 
 
<body></body> 
 
</html>