<h1>Bootstrap buttons</h1>
<div class="container">
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-light">Light</button>
  <button type="button" class="btn btn-dark">Dark</button>

  <button type="button" class="btn btn-link">Link</button>
</div>
//---------------Style title---------------------------
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
h1{
  text-align: center;
  font-family: 'Roboto', sans-serif;
  margin: 40px;
}

//---------------Style container-----------------------
.container{
  display: block;
  margin-right: auto;
  margin-left: auto;
  width: fit-content;
  margin-top: 60px;
}

//---------------Style button--------------------------
.btn{
  margin-right: 0.07rem;
  margin-left: 0.07rem;
  margin-bottom: 0.5rem;
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  cursor: pointer;
  -webkit-appearance: button;
  text-transform: none;
  overflow: visible;
  outline: none;
  &:hover, &:focus{
    text-decoration: none;
  }
}

@mixin button($color, $backgroundColor, $borderColor){
  color: $color;
  background-color: $backgroundColor;
  border-color: $borderColor;
}

//---------------Style of each button-------------------
.btn-primary{
   @include button(#fff, #007bff, #007bff);
  &:hover{
    @include button(#fff, #0069d9, #0069d9);
  }
  &:focus{
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
  }
}
.btn-secondary{
   @include button(#fff, #6c757d, #6c757d);
  &:hover{
    @include button(#fff, #5a6268, #5a6268);
  }
  &:focus{
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
  }
}
.btn-success{
  @include button(#fff, #28a745, #28a745);
  &:hover{
    @include button(#fff, #218838, #218838);
  }
  &:focus{
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
  }
}
.btn-danger{
  @include button(#fff, #dc3545, #dc3545);
  &:hover{
    @include button(#fff, #c82333, #c82333);
  }
  &:focus{
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
  }
}
.btn-warning{
  @include button(#212529, #ffc107, #ffc107);
  &:hover{
    @include button(#212529, #e0a800, #e0a800);
  }
  &:focus{
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
  }
}
.btn-info{
  @include button(#fff, #17a2b8, #17a2b8);
  &:hover{
    @include button(#fff, #138496, #138496);
  }
  &:focus{
    box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
  }
}
.btn-light{
  @include button(#212529, #f8f9fa, #f8f9fa);
  &:hover{
    @include button(#212529, #e2e6ea, #e2e6ea);
  }
  &:focus{
    box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
  }
}
.btn-dark{
  @include button(#fff, #343a40, #343a40);
  &:hover{
    @include button(#fff, #23272b, #23272b);
  }
  &:focus{
    box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
  }
}
.btn-link{
  font-weight: 400;
  @include button(#007bff, transparent, transparent);
  &:hover{
    color: #0056b3;
    text-decoration: underline;
    background-color: transparent;
    border-color: transparent;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.