Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Button with arrow on hover
<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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment