<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.