<section>
  <header>
    <h2 id="button-section">Color</h2>
    <span class="sub-title">色を変える</span>
  </header>
  <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>
</section>
@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c:400,700');

body {
  padding: 2rem 1.5rem;
  color: #333;
  // change font
  font-family: "M PLUS Rounded 1c", sans-serif;
  line-height: 1.8;
}

section {
  header {
    margin-bottom: 1rem;
  }
  
  & + & {
    margin-top: 4rem;
  }
}

.sub-title {
  color: #666;
  font-size: 0.95rem;
}

// change radius
.alert,
.btn,
.form-control {
  border-radius: 0.125rem;
}

// change button color
.btn-primary {
  background-color: #5d9cec !important;
  border-color: #468ee9 !important;
  &:hover {
    background-color: #2f80e7 !important;
    border-color: #196ed9 !important;
  }
}
.btn-success {
  background-color: #a0d468 !important;
  border-color: #94ce54 !important;
  &:hover {
    background-color: #87c940 !important;
    border-color: #75b233 !important;
  }
}
.btn-info {
  background-color: #22b1e3 !important;
  border-color: #199bc8 !important;
  &:hover {
    background-color: #22b1e3 !important;
    border-color: #199bc8 !important;
  }
}
.btn-warning {
  background-color: #ffce54 !important;
  border-color: #ffc73a !important;
  &:hover {
    background-color: #ffbf21 !important;
    border-color: #fcb400 !important;
  }
}
.btn-danger {
  background-color: #ed5565 !important;
  border-color: #eb3e50 !important;
  &:hover {
    background-color: #e8273b !important;
    border-color: #d5172b !important;
  }
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.