Generated by SassMeister.com.

SassMeister-input-HTML.html

<div id="wrapper">
  <a href="#" class="thirtyDay"><strong><em>30 Day</em>Money Back Guarantee</strong></a>
  <a href="#" class="cta">Get a Number &amp; Sign Up &raquo;</a>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

@import "compass";

$color-white: #fff;
$color-purple: #8235B2;
$color-blue: #008FC5;
$color-dark-blue: #3B5998;
$font-size: 14px;
$semibold: "ProximaNovaSemibold", sans-serif;

%button {
  display: inline-block;
  text-align: center;
  position: relative;
}
%cta {
  @include border-radius(3px);
  font: 22px/1 $semibold;
  padding: 20px;
}
%thirtyDay {
  @include border-radius(15px);
  
  strong {
    color: #fff;
    display: block;
    left: 2px;
    line-height: 1;
    position: absolute;
    top: 17px;
    z-index: 2;

    em {
      display: block;
      font-family: $semibold;
      font-size: $font-size + 8;
      padding-bottom: 5px;
    }
  }
  &:before, &:after {
    @include border-radius(15px);
    content: "";
    position: absolute;
    top: 0;
    left: 0;
  }

    &:before {
      @include rotate(30deg);
    }

    &:after {
      @include rotate(60deg);
    }
}

@mixin button($bgColor: $color-purple, $color: $color-white, $type: cta) {
  @extend %#{$type};
  @extend %button;
  background: $bgColor;
  color: $color;
  @content;

}

.howItWorksBtn {
  @include button($color-dark-blue);
}
.getNumberBtn {
  @include button();
}
.thirtyDay {
  @include button($color-blue, $type: thirtyDay) {
    width: 90px;
    height: 90px;
  }
  &:before, &:after {
    background-color: $color-blue;
    height: 90px;
    width: 90px;
  }
}

SassMeister-output.css

.howItWorksBtn, .getNumberBtn, .thirtyDay {
  display: inline-block;
  text-align: center;
  position: relative;
}

.howItWorksBtn, .getNumberBtn {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font: 22px/1 "ProximaNovaSemibold", sans-serif;
  padding: 20px;
}

.thirtyDay {
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
}
.thirtyDay strong {
  color: #fff;
  display: block;
  left: 2px;
  line-height: 1;
  position: absolute;
  top: 17px;
  z-index: 2;
}
.thirtyDay strong em {
  display: block;
  font-family: "ProximaNovaSemibold", sans-serif;
  font-size: 22px;
  padding-bottom: 5px;
}
.thirtyDay:before, .thirtyDay:after {
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
}
.thirtyDay:before {
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}
.thirtyDay:after {
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}

.howItWorksBtn {
  background: #3b5998;
  color: white;
}

.getNumberBtn {
  background: #8235b2;
  color: white;
}

.thirtyDay {
  background: #008fc5;
  color: white;
  width: 90px;
  height: 90px;
}
.thirtyDay:before, .thirtyDay:after {
  background-color: #008fc5;
  height: 90px;
  width: 90px;
}