jdsteinbach
8/13/2014 - 1:56 PM

Generated by SassMeister.com.

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>