Svg hover animated buttons

index.haml

.row
  .col
    .button.hover1
      %svg{:xmlns => "http://www.w3.org/2000/svg"}
        %rect.shape{:height => "100%", :width => "100%"}
      .content HOVER

  .col
    .button.hover2
      %svg{:xmlns => "http://www.w3.org/2000/svg"}
        %rect.shape{:height => "100%", :width => "100%"}
      .content HOVER 2

  .col
    .button.hover3
      %svg{:xmlns => "http://www.w3.org/2000/svg"}
        %rect.shape{:height => "100%", :width => "100%"}
      .content HOVER 3

  .col
    .button.hover4
      %svg{:xmlns => "http://www.w3.org/2000/svg"}
        %rect.shape{:height => "100%", :width => "100%"}
      .content HOVER 4
  .col
    .button.hover5
      %svg{:xmlns => "http://www.w3.org/2000/svg"}
        %rect.shape{:height => "100%", :width => "100%"}
      .content HOVER 5

style.scss

@import "compass/css3";
@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500);

$items_per_row: 3;

$btn_height: 50px;
$btn_width: 180px;
$btn_stroke_color: #2980b9;
$btn_active_stroke_color: #e74c3c;

$btn_color: #2980b9;
$btn_active_color: #e74c3c;
$btn_stroke_width: 6px;

* {
  @include box-sizing(border-box);
    &:after,
    &:before {
        @include box-sizing(border-box);
    }
}
html {
  height: 100%;
}
body {
  height: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background-color: #333;
  padding-top: 50px;
}

.row {
  width: 700px;
  margin: 0 auto;
  overflow: hidden;
}
.col{
  float: left;
  width: 100%/$items_per_row;
  text-align: center;
}
.button {
  position: relative;
  height: $btn_height;
  padding: 0 10px;
  width: $btn_width;
  margin: 15px 20px 30px;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  display: inline-block;
  cursor: pointer;

  &.hover1 {
    .shape {
      stroke-dasharray: 100, 0;
      stroke-dashoffset: #{$btn_width};
    }
    &:hover {
      .shape {
        stroke-dasharray: 45, $btn_width;
        stroke-dashoffset: #{$btn_width/10};
      }
    }
  }
  &.hover2 {
    .shape {
      stroke-dasharray: 100, 0;
      stroke-dashoffset: #{$btn_width};
    }
    &:hover {
      .shape {
        stroke-dasharray: #{$btn_width/5}, #{$btn_width + $btn_width/20};
        stroke-dashoffset: #{$btn_width};
      }
    }
  }
  &.hover3 {
    .shape {
      stroke-dasharray: 100, 0;
      stroke-dashoffset: #{$btn_width};
    }
    &:hover {
      .shape {
        stroke-dasharray: #{$btn_width/5}, #{$btn_width + $btn_width/20};
        stroke-dashoffset: #{$btn_width/5};
        stroke-width: #{$btn_stroke_width};
      }
    }
  }
  &.hover4 {
    .shape {
      stroke-dasharray: 100, 0;
      stroke-dashoffset: #{$btn_width};
    }
      &:hover {
        .shape {
          stroke-dasharray: 60px, 380px;
          stroke-dashoffset: 150px;
        }
      stroke-width: #{$btn_stroke_width};
    }
  }
  &.hover5 {
    .shape {
      stroke-dasharray: 160, 0;
      stroke-dashoffset: #{$btn_width};
    }
    &:hover {
      .shape {
        stroke-dasharray: 20px, 20px;
        stroke-dashoffset: 150px;
        stroke-width: #{$btn_stroke_width};
        fill: $btn_active_stroke_color;
      }
      .content {
        color: #333;
      }
    }
  }

  svg {
    position: relative;
    z-index: 1;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 0;
  }
  .content {
    color: $btn_color;
    line-height: $btn_height;
    text-align: center;
    z-index: 2;
    position: relative;
    vertical-align: middle;
    @include transition(all 0.4s ease-in-out);
  }
  &:hover {
    .content {
      color: $btn_active_color;
    }
    .shape {
      stroke: $btn_active_stroke_color;
    }
  }
  .shape {
    fill: transparent;
    stroke: $btn_stroke_color;
    @include transition(all 0.4s ease-in-out);
    stroke-width: $btn_stroke_width;
  }
}

svg-hover-animated-buttons.markdown

Svg hover animated buttons

A Pen by Marko on CodePen.

License.