Split pill button call to action

index.html

<div class="cta-buttons">
  <a href="#" target="_blank" class="try btn outline">
    <span class="unskew">Try</span>
  </a>&nbsp;
  <a href="#" target="_blank" class="buy btn outline">
    <span class="unskew">Buy</span>
  </a>
</div>

Split-pill-button-call-to-action.markdown

Split pill button call to action

An experimental take on the traditional call-to-action buttons with rounded pill style and diagonal split. Includes hover state.

A Pen by Meghan on CodePen.

License.

style.scss

// Variables
$background-color: #262626;
$button: #ffffff;
$button-hover: #333333;
$radius1: 25px;
$radius2: $radius1 * 2;

// Text styling mixin
@mixin text {
  font-family: sans-serif;
  font-size: 16px;
	font-weight: 400;
	line-height: 1.33;
	text-align: center;
	text-decoration: none;
  text-transform: uppercase;
	vertical-align: middle;
}
 
// Vendor prefix mixin for skew
$prefix: "-webkit", "-moz", "-o", "-ms";
@mixin skew($angle) {
  @each $vendor in $prefix {
    #{$vendor}-transform: skew($angle);
  }
  transform: skew($angle);
}

body {
  background-color: $background-color;
}
.cta-buttons {
	position: fixed;
	top: 9px;
	right: 80px;
	z-index: 9999;
}
@media(max-width: 480px){
  .cta-buttons { display: none; }
}
.btn {
	background-color: transparent;
  display: inline-block;
	@include skew(-15deg);
	@include text;
	white-space: nowrap;
  
  .unskew {
    @include skew(15deg);
    display: inline-block;
  }
}
.try {
    border-top-left-radius: $radius1;
    border-bottom-left-radius: $radius2;
    padding: 8px 20px 8px 30px;
  }
  .buy {
    border-bottom-right-radius: $radius1;
    border-top-right-radius: $radius2;
    padding: 8px 30px 8px 20px;
  }
  .outline {
    color: $button;
    border: 2px solid $button;
    transition: all .3s;
  }
  .outline:hover {
    background-color: $button;
    color: $button-hover;
  }