A Pen by Andrew Patton.

Buttons-hover-effect.markdown

Buttons hover effect

Forked from Yoann’s Pen Buttons hover effect.

Reduced markup to a single anchor element, inlined the chevron as svg (removing font awesome dependency), simplified and streamlined the SCSS

A Pen by Andrew Patton on CodePen.

License.

index.html

<div class="type-1">
  <div>
    <a href="" class="btn btn-1">Hover me</a>
  </div>

  <div>
    <a href="" class="btn btn-2">Hover me</a>
  </div>

  <div>
    <a href="" class="btn btn-3">Hover me</a>
  </div>
</div>
  
<div class="type-2">
  <div>
    <a href="" class="btn btn-1">Hover me</a>
  </div>

  <div>
    <a href="" class="btn btn-2">Hover me</a>
  </div>
  
  <div>
    <a href="" class="btn btn-3">Hover me</a>
  </div>
</div>
  
<div class="type-3">
  <div>
    <a href="" class="btn btn-1">Hover me</a>
  </div>

  <div>
    <a href="" class="btn btn-2">Hover me</a>
  </div>
  
  <div>
    <a href="" class="btn btn-3">Hover me</a>
  </div>
</div>

style.scss

@import "compass/css3";
$color1: #F27935;
$color2: #00AFD1;
$color3: #5A5B5E;
$chevron: 'data:image/svg+xml;utf8,<svg width="144" height="144" xmlns="http://www.w3.org/2000/svg"><g><path fill="#ffffff" id="svg_1" d="m108.98851,65.667l-53.119007,-53.039001c-1.956001,-2.064 -4.399002,-3.096001 -7.333,-3.096001s-5.377007,1.033 -7.333,3.096001l-6.192001,6.110999c-2.010002,2.010002 -3.014999,4.452999 -3.014999,7.332001c0,2.823999 1.004997,5.296001 3.014999,7.414001l39.596004,39.514999l-39.597004,39.596001c-2.010002,2.010002 -3.014999,4.454002 -3.014999,7.333c0,2.823997 1.004997,5.295998 3.014999,7.414001l6.192001,6.110001c2.009995,2.009995 4.454994,3.014999 7.333,3.014999c2.878998,0 5.323997,-1.005005 7.332993,-3.014999l53.120014,-53.039001c2.009995,-2.118004 3.015991,-4.590004 3.015991,-7.414001c0,-2.878998 -1.005997,-5.322998 -3.015991,-7.333z"/></g></svg>';

body {
  margin:10px;
  text-align:center;
  > div {
    width:33%;
    float:left;
    > div {
        margin-bottom:15px;
    }
  }
}

.btn-1 {
  background-color:$color1;
}

.btn-2 {
  background-color:$color2;
}

.btn-3 {
  background-color:$color3;
}

%btn-chevron {
  display:block;
  content:"";
  position:absolute;
  right:3px;
  top:3px;
  z-index:2;
  width:38px;
  height:38px;
  background-image:url($chevron);
  background-size:16px 16px;
  background-repeat:no-repeat;
  background-position:12px center;
  @include border-radius(19px);
  @include transition(all .3s ease-out);
}

a {
  position:relative;
  font-size:14px;
  line-height:1;
  text-decoration:none;
  @include border-radius(30px);
  padding:15px 53px 15px 23px;
  color:#fff;
  text-transform:uppercase;
  font-family:sans-serif;
  font-weight:bold;
  position:relative;
  @include transition(all .3s);
  display:inline-block;
  &:before {
    @extend %btn-chevron;
    background-color:rgba(255,255,255,0.25);
  }
}

.type-1 {
  a:hover {
    padding-left:48px;
    padding-right:28px;
    &:before {
      width:calc(100% - 6px);
    }
  }
}

.type-2 {
  a:hover {
    &:before {
      background-color:rgba(255, 255, 255, 0);
      background-position:19px center;
    }
  }
}

.type-3 {
  a {
    overflow:hidden;
    &:before {
      background-image:none;
    }
    &:after {
      @extend %btn-chevron;
    }
    &:hover {
      &:before {
        right:100%;
        width:50%;
      }
      &:after {
        background-position:19px center;
      }
    }
  }
}