<body>
  <div class="container">
    <h1>How to create your custom Bootstrap buttons</h1>

    <p><a href="#" class="btn btn-outline">Custom outline button</a></p>
    <p><a href="#" class="btn btn-colour-1">Custom colour button</a></p>

    <p class="text-muted">This pen is a part of the <a href="https://bootstrapious.com/p/bootstrap-tips-and-tricks" target="_blank">Bootstrap tips and tricks article</a>.</p>

  </div>
</body>
.btn-outline {
  color: #4fbfa8;
  background-color: #ffffff;
  border-color: #4fbfa8;
  font-weight: bold;
  letter-spacing: 0.05em;
}

.btn-outline {
  color: #4fbfa8;
  background-color: #ffffff;
  border-color: #4fbfa8;
  font-weight: bold;
  border-radius: 0;
}

.btn-outline:hover,
.btn-outline:active,
.btn-outline:focus,
.btn-outline.active {
  background: #4fbfa8;
  color: #ffffff;
  border-color: #4fbfa8;
  
}


.btn-colour-1 {
  color: #fff;
  background-color: #004E64;
  border-color: #004E64;
  font-weight: bold;
  letter-spacing: 0.05em;
  border-radius: 0;
}

.btn-colour-1:hover,
.btn-colour-1:active,
.btn-colour-1:focus,
.btn-colour-1.active {
  /* let's darken #004E64 a bit for hover effect */
  background: #003D4F;
  color: #ffffff;
  border-color: #003D4F;
}

/* for demo purpose only */

body {
  padding: 20px 0;
  font-family: Roboto, sans-serif;
}

h1 {
  font-weight: 300;
  margin-bottom: 40px;
}
Rerun