Bootstrap - стиль кнопок не применяется к кнопкам

Question

Я пытаюсь заставить эти кнопки соответствовать моему css, но они не соответствуют стилю.

Я сделал новые кнопки, и они также не были стилизованы под мой css.Однако я заметил, что текст пишется в верхнем регистре, который у меня есть как часть CSS, что заставляет меня думать, что часть его неверна.

 <section id="gallery" class="content-section text-center">
      <div class="container">
      <div class="row">
      <div class="col-lg-8 mx-auto">
        <button class="btn active" onclick="filterSelection('all')">Show all</button>
        <button type="button" onclick="filterSelection('sealion')">Sea Lions</button>
      </div>

.btn {
  font-family: 'Cabin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  text-transform: uppercase;
  border-radius: 0;
}

.btn-default {
  color: #42DCA3;
  border: 1px solid #42DCA3;
  background-color: transparent;
}

.btn-default:focus, .btn-default:hover {
  color: black;
  border: 1px solid #42DCA3;
  outline: none;
  background-color: #42DCA3;
}

Ожидаемый результат состоит в том, что кнопки представляют собой черные прямоугольники сбелый текст и зеленая рамка.Как только кнопка наведена, кнопка затвердевает зеленым цветом.

Answer 1

Сначала необходимо добавить класс btn-default в button и дать css, используя все классы кнопок вместе, например .btn.active.btn-default, для переопределения bootstrap css

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style type="text/css">
.btn {
  font-family: 'Cabin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  text-transform: uppercase;
  border-radius: 0;
}

.btn.active.btn-default {
  color: #42DCA3;
  border: 1px solid #42DCA3;
  background-color: transparent;
}

.btn.active.btn-default:focus, .btn.active.btn-default:hover {
  color: black;
  border: 1px solid #42DCA3;
  outline: none;
  background-color: #42DCA3;
}
</style>

<section id="gallery" class="content-section text-center">
   <div class="container">
      <div class="row">
        <div class="col-lg-8 mx-auto">
          <button class="btn active btn-default" onclick="filterSelection('all')">Show all</button>
          <button type="button" onclick="filterSelection('sealion')">Sea Lions</button>
        </div>
      </div>
   </div>
</section>

Answer 2

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style type="text/css">
.btn {
  font-family: 'Cabin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  text-transform: uppercase;
  border-radius: 0;
}

.btn.active.btn-default {
  color: #42DCA3;
  border: 1px solid #42DCA3;
  background-color: transparent;
}

.btn.active.btn-default:focus, .btn.active.btn-default:hover {
  color: black;
  border: 1px solid #42DCA3;
  outline: none;
  background-color: #42DCA3;
}
.btn.active.btn-primary {
  color: #42DCA3;
  border: 1px solid #42DCA3;
  background-color: transparent;
}

.btn.active.btn-primary:focus, .btn.active.btn-primary:hover {
  color: black;
  border: 1px solid #42DCA3;
  outline: none;
  background-color: #42DCA3;
}
</style>

<section id="gallery" class="content-section text-center">
   <div class="container">
      <div class="row">
        <div class="col-lg-8 mx-auto">
          <button class="btn active btn-default" onclick="filterSelection('all')">Show all</button>
          <button class="btn btn-primary active" onclick="filterSelection('sealion')">Sea Lions</button>
        </div>
      </div>
   </div>
</section>

попробуйте этот код, он работает сейчас

Answer 3

Добавить класс btn-default к button tag

<section id="gallery" class="content-section text-center">
      <div class="container">
      <div class="row">
      <div class="col-lg-8 mx-auto">
        <button class="btn btn-default active" onclick="filterSelection('all')">Show all</button>
        <button type="button" onclick="filterSelection('sealion')">Sea Lions</button>

      </div>

https://jsfiddle.net/lalji1051/puezgn9v/4/