Skew button group experiment for Zurb Foundation

_buttons.php

<div class="button-group skew">
	<div class="button-wrap one"><a href="#" class="button button-one">Book Now</a></div><!-- 
	--><div class="button-wrap two"><a href="#" class="button button-two">More Info</a></div>
</div>

_skew-buttons.scss

.button-group.skew {
  $button-height: 40px;
  $skew-width: 20px;
  $button-left-bg-color: $primary-color;
  $button-left-hover-bg-color: scale-color($button-left-bg-color, $lightness: -15%);
  $button-right-bg-color: green;//$secondary-color;
  $button-right-hover-bg-color: scale-color($button-right-bg-color, $lightness: -15%);
  $button-color: $white;
  $button-hover-color: $button-color;   
  a.button {
    padding: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    width: 100%;
    height: $button-height;
    transition: background-color 0.25s ease-out, color 0.25s ease-out;
  }
  .button-wrap {
    position: relative;
    width: 50%;
    display: inline-block;    
    a.button.button-one {
      background-color: $button-left-bg-color;
      color: $button-color;
    } 
    a.button.button-two {
      background-color: $button-right-bg-color;
      color: $button-color;
    }
  } 
  .button-wrap:before, .button-wrap:after {
    z-index: 100;
    position: absolute;
    display: inline-block;
    content:" ";  
    top: 0; 
    width: 0;
    height: 0;
    transition: border-color 0.25s ease-out, color 0.25s ease-out;  
  }
  .button-wrap.one:after {
    border-style: solid;
    right: -($skew-width / 2);
    border-width: $button-height $skew-width 0 0;
    border-color: $button-left-bg-color transparent transparent transparent;      
  }
  .button-wrap.two:before {
    border-style: solid;
    left: -($skew-width / 2);
    border-width: 0 0 $button-height $skew-width;
    border-color: transparent transparent $button-right-bg-color transparent;
  } 

  .button-wrap:hover {
    a.button.button-one {
      background-color: $button-left-hover-bg-color;
      color: $button-hover-color;
    } 
    a.button.button-two {
      background-color: $button-right-hover-bg-color;
      color: $button-hover-color;
    }
  }
  .button-wrap.one:hover:after {
    border-color: $button-left-hover-bg-color transparent transparent transparent;        
  }
  .button-wrap.two:hover:before {
    border-color: transparent transparent $button-right-hover-bg-color transparent;     
  }         
}