Fancy Button

by Bouteille Dimitri

HTML

<div class="align">
  <div class="align-bis">
    <p>
    <a href="" class="fancy-btn"><span>Send a message</span></a>
    </p>
  </div>
 </div>
 
 <div class="align">
  <div class="align-bis">
    <p>
    <a href="" class="fancy-btn to-background"><span>Send a message</span></a>
    </p>
  </div>
 </div>
 
  <div class="align">
  <div class="align-bis">
    <p>
    <a href="" class="fancy-btn to-background reverse"><span>Send a message</span></a>
    </p>
  </div>
 </div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

$primary : #03A9F4;
$grey : rgb(242,242,242);
$white : #fff;
$black: #333;

$transitionDuration : 0.25s;
$borderWidth : 3px;

//
// Default style
* {
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: $black;
  font-size: 15px;
}

.align{
  display: flex;
  background-color: rgb(250,250,250);
  &-bis{
    flex: 1;
    display:flex;
    justify-content: center;
    padding: 40px 0;
  }
  .black{
    background-color:$black;
  }
}

// Style components
.fancy-btn{
  position:relative;
  display:inline-block;
  transition: all $transitionDuration ease-out;
  text-decoration: none;
  span{
    font-weight:600;
    text-transform: uppercase;
    display:block;
    position:relative;
    z-index:50;    
    padding: 15px 20px;
  }
  &:after, &:before, span:before, span:after{
    content:"";
    position:absolute;
    background: $black;
    transition: all $transitionDuration ease-out;
  }
    
  // Border top
  &:after {
      left:0;
      right:100%; // set 0 for the animation
      top:0;
      height: $borderWidth;      
      transition-delay: $transitionDuration;
  }
 
  // Border right
  &:before{
      right:0;
      bottom:100%; // set 0 for the animation
      top:0;
      width: $borderWidth;      
      transition-delay: 0s;
  }

  span{
       
    // Border Bottom
    &:before {
      bottom:0;
      left:0;
      right:0;    
      height: $borderWidth;
      z-index: -1;
    }
    
    // Border left
    &:after {
      width: $borderWidth;
      bottom:0;
      left: 0;
      top: 100%; // set 0 for the animation
      transition-delay: ($transitionDuration * 2);
    }
    
  }
  
  // Animation
  &:hover, &:focus {
    span {
      &:after{
        top: 0;      
        transition-delay: 0s;
      }
    }
    &:after {
      right:0;
      transition-delay:...