Generated by SassMeister.com.
<a class="btn--large" href="">Large Button</a>
Or
<a class="btn--small" href="">Small Button</a>
.btn--large, .btn--small {
background: #2980b9;
border-radius: 0.2em;
color: #fff;
display: inline-block;
line-height: 2;
margin: 0;
padding: 0 1em;
vertical-align: middle;
text-decoration: none;
white-space: nowrap;
}
.btn--large {
font-size: 1.5em;
padding-right: 1.5em;
padding-left: 1.5em;
}
.btn--small {
padding-right: 0.5em;
padding-left: 0.5em;
}
// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// ----
%btn {
background: #2980b9;
border-radius: 0.2em;
color: #fff;
display: inline-block;
line-height: 2;
margin: 0;
padding: 0 1em;
vertical-align: middle;
text-decoration: none;
white-space: nowrap;
}
.btn--large {
@extend %btn;
font-size: 1.5em;
padding-right: 1.5em;
padding-left: 1.5em;
}
.btn--small {
@extend %btn;
padding-right: 0.5em;
padding-left: 0.5em;
}
<a class="btn--large" href="">Large Button</a>
Or
<a class="btn--small" href="">Small Button</a>