Border Button

by Bouteille Dimitri

HTML

<div class="align grey">
  <div class="align-bis">
    <p>
    <a href="" class="border-btn"><span>Send a message</span></a>
    </p>
  </div>
 </div>
 
 <div class="align grey">
  <div class="align-bis">
    <p>
    <a href="" class="border-btn to-background"><span>Send a message</span></a>
    </p>
  </div>
 </div>
 
  <div class="align grey">
  <div class="align-bis">
    <p>
    <a href="" class="border-btn to-background radius"><span>Send a message</span></a>
    </p>
  </div>
 </div>
 
   <div class="align grey">
  <div class="align-bis">
    <p>
    <a href="" class="border-btn background radius"><span>Send a message</span></a>
    </p>
  </div>
 </div>
 
    <div class="align grey">
  <div class="align-bis">
    <p>
    <a href="" class="border-btn background radius to-transparent"><span>Send a message</span></a>
    </p>
  </div>
 </div>
 
<div class="align grey">
  <div class="align-bis">
    <p>
      <a href="" class="border-btn background to-transparent"><span>Send a message</span></a>
    </p>
  </div>
</div>
 
<div class="align">
  <div class="align-bis">
    <p>
      <a href="" class="border-btn to-swipe"><span>Send a message</span></a>
    </p>
  </div>
</div>
 
<div class="align">
  <div class="align-bis">
    <p>
      <a href="" class="border-btn to-swipe left"><span>Send a message</span></a>
    </p>
  </div>
</div>
 
<div class="align">
  <div class="align-bis">
    <p>
      <a href="" class="border-btn to-swipe top"><span>Send a message</span></a>
    </p>
  </div>
</div>

<div class="align">
  <div class="align-bis">
    <p>
      <a href="" class="border-btn to-swipe bottom"><span>Send a message</span></a>
    </p>
  </div>
</div>
 
 <div class="align grey">
  <div class="align-bis">
    <p>
      <a href="" class="border-btn to-swipe reverse radius"><span>Send a message</span></a>
    </p>
  </div>
</div>
 
<div class="align grey">
  <div class="align-bis">
    <p>
      <a href="" class="border-btn to-swipe left reverse"><span>Send a...

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;

$borderColor : $black;
$borderWidth : 1px;
$borderTransition : 0.25s;
$borderBtnHeight: 42px;

//
// 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;
  }
  &.grey{
    background-color: rgb(245,245,245);
  }
}

// Style components
.border-btn{
  position:relative;
  display:inline-block;
  text-decoration: none;
 
  span{
    height: $borderBtnHeight;
    line-height: $borderBtnHeight;
    font-weight:400;
    text-transform: uppercase;
    display:block;
    position:relative;
    padding: 0 20px;
  
    border: solid $borderWidth $borderColor;
    transition: all $borderTransition ease-out;
  }
  
  &.radius{
     span {
    border-radius: $borderBtnHeight;
    }
  }
  
  // Animation .to-background
  &.to-background{
    &:hover, &:focus{
      
     span{
       color: $white;
       background-color : $borderColor;
     }
    }
  }
  
  
  &.background{
    span{
      color: $white;
      background-color : $borderColor;
    }
    
    &.to-transparent{
      &:hover, &:focus{
        span {
          color: $borderColor;
      background-color : transparent;
        }
      }
    }
  }
  
  // Swipe animation
  &.to-swipe {
    z-index: 50;
    span{
      z-index: 30;
      overflow:hidden;
      &:before{
        content:"";
        z-index: -1;
        position:absolute;
        left:0;
        top:0;
        width: 0;
        height: 100%;
        background: $borderColor;
        transition: all $borderTransition ease-out;
      }
    }
    
    // Swipe to left
    &.left{
      span{
       ...