Button with animated border

button-with-animated-border.markdown

Button with animated border

Based on http://codepen.io/thomasvaeth/pen/JKxRNk

A Pen by Jens Grochtdreis on CodePen.

License.

index.html

<a class="btn-draw" href="#">
  <span>Click Me!</span>
</a>

<button class="btn-draw" type="button">
  <span>Click Me!</span>
</button>

style.scss

// Color variables
$color-blue: #324577;
$color-grey: #e4e4e2;

$btn-background: #fff;

// Mixin for drawing button with optional argument for width, padding, and time
@mixin btn-draw($color, $color-hov, $width: 1px, $padding: 0.5em, $time: 0.2s) {
  position: relative;
  display: inline-block;
  background-color: $btn-background;
  color: $color;
  border: none;
  border-bottom: $width solid $color;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  
  transition: color $time ease-in-out, background-color $time ease-in-out;

  &:after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;

    height: 100%;
    width: $width;

    background: $color;
    transform: translateY(100%);
    transition: transform $time ease-in-out;
    transition-delay: $time * 3;
  }

  > span {
    position: relative;

    display: block;
    padding: $padding;

    color: inherit;

    &:before, 
    &:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;

      background: $color;
      transition: transform $time ease-in-out;
    }

    &:before {
      height: $width;
      width: 100%;
      
      transform: translateX(100%);
      transition-delay: $time * 2;
    }

    &:after {
      height: 100%;
      width: $width;

      transform: translateY(-100%);
      transition-delay: $time;
    }
  }

  &:hover:after, 
  &:hover > span:before, 
  &:hover > span:after {
    transform: translate(0, 0);
  }

  &:hover:after {
    transition-delay: 0s;
  }

  &:hover > span:before {
    transition-delay: $time;
  }

  &:hover > span:after {
    transition-delay: $time * 2;
  }

  &:hover, &:focus {
    color: $color-hov;
    background-color: $color;
    transition-delay: $time * 3;
  }
}


.btn-draw {
  font-size: 2em;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.1em;
  
  @include btn-draw($color-blue, $color-grey, 2px);
}


// only for demonstration
.btn-draw  {
  margin-right: 20px;
}

styles

<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/basics-4.css" rel="stylesheet" />