Button with arrow on hover
A Pen by Nicholas Petersen on CodePen.
<div class="center"> | |
<button class="btn btn-reverse btn-arrow"> | |
<span>Hover me<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 36.1 25.8" enable-background="new 0 0 36.1 25.8" xml:space="preserve"><g><line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="0" y1="12.9" x2="34" y2="12.9"></line><polyline fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" points="22.2,1.1 34,12.9 22.2,24.7 "></polyline></g></svg></span> | |
</button> | |
<button class="btn btn-arrow btn-border"> | |
<span>Hover me<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 36.1 25.8" enable-background="new 0 0 36.1 25.8" xml:space="preserve"><g><line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="0" y1="12.9" x2="34" y2="12.9"></line><polyline fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" points="22.2,1.1 34,12.9 22.2,24.7 "></polyline></g></svg></span> | |
</button> | |
</div> |
* { | |
box-sizing: border box; | |
} | |
.center { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
} | |
@black: #1d1d1d; | |
.btn, | |
button { | |
background: @black; | |
color: white; | |
border: none; | |
font-size: 10px; | |
font-size: 1rem; | |
background-color: @black; | |
color: white; | |
letter-spacing: 1.5px; | |
text-transform: uppercase; | |
padding: 14px 21px; | |
padding: 1.4rem 2.1rem; | |
border: 2px solid @black; | |
transition: color 0.1s cubic-bezier(0.16, 0.08, 0.355, 1), background 0.1s cubic-bezier(0.16, 0.08, 0.355, 1); | |
display: inline-block; | |
cursor: pointer; | |
width: 100%; | |
min-width: 200px; | |
min-width: 20rem; | |
outline: none; | |
vertical-align: middle; | |
text-align: center; | |
position: relative; | |
overflow: hidden; | |
@media (min-width: 400px) { | |
width: auto; | |
} | |
@media (min-width: 800px) { | |
font-size: 1.1rem; | |
padding: 1.6rem 2.8rem; | |
} | |
&:hover { | |
background: lighten(@black, 5%); | |
border-color: lighten(@black, 5%); | |
color: #fff; | |
} | |
} | |
.btn-border { | |
background-color: transparent; | |
color: @black; | |
} | |
.btn-arrow { | |
position: relative; | |
transition: background-color 300ms ease-out; | |
span { | |
display: inline-block; | |
position: relative; | |
transition: all 300ms ease-out; | |
will-change: transform; | |
} | |
&:hover span { | |
transform: translate3d(-1rem, 0, 0); | |
} | |
svg { | |
position: absolute; | |
width: 1.1em; | |
right: 0px; | |
right: 0rem; | |
opacity: 0; | |
top: 50%; | |
transform: translateY(-50%); | |
transition: all 300ms ease-out; | |
will-change: right, opacity; | |
* { | |
stroke-width: 5; | |
stroke-color: transparent; | |
} | |
} | |
&:hover svg { | |
opacity: 1; | |
right: -2rem; | |
} | |
} |