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.
<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> |
@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; | |
} | |
} | |
} | |
} |