<div>
  <a href="#0" class="button button--small">I am a button</a>
</div>
<div>
  <a href="#0" class="button">I am a button</a>
</div>
<div>
  <a href="#0" class="button button--large">I am a button</a>
</div>
body {
  padding: 50px;
}

// Bodge for demo
div {
  margin-bottom: 30px;
}

// Basic button style
.button {
  display: inline-block;
  background: red;
  font-size: 1.125rem; // 18px
  padding: 1em 2em; // Relative padding
  color: white;
  text-decoration: none;
  text-transform: uppercase;
}

.button--small {
  font-size: 15px;
}

.button--large {
  font-size: 22px;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.