Hover over the button to reveal a heart.
<button class="button-hover-like button"><span>Like me</span><i class="fa fa-heart"></i></button>
.button-hover-like {
border: 2px solid $secondary-color;
background: transparent;
color: $secondary-color;
text-transform: uppercase;
overflow: hidden;
letter-spacing: 0.07rem;
transition: all 0.2s ease-in-out;
position: relative;
span {
transition: all 0.2s ease-in-out;
}
.fa {
position: absolute;
font-size: 1.2rem;
top: 50%;
transform: translateY(-50%);
color: #F15261;
right: -20px;
transition: 0.4s right cubic-bezier(0.38,0.6,0.48,1);
}
&:hover {
border-color: $primary-color;
background: transparent;
transition: border-color 0.2s;
span {
margin-right: 20px;
color: $primary-color;
}
.fa {
right: 10px;
}
}
}
.button-hover-like {
border: 2px solid #767676;
background: transparent;
color: #767676;
text-transform: uppercase;
overflow: hidden;
letter-spacing: 0.07rem;
transition: all 0.2s ease-in-out;
position: relative;
}
.button-hover-like span {
transition: all 0.2s ease-in-out;
}
.button-hover-like .fa {
position: absolute;
font-size: 1.2rem;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
color: #F15261;
right: -20px;
transition: 0.4s right cubic-bezier(0.38, 0.6, 0.48, 1);
}
.button-hover-like:hover {
border-color: #1779ba;
background: transparent;
transition: border-color 0.2s;
}
.button-hover-like:hover span {
margin-right: 20px;
color: #1779ba;
}
.button-hover-like:hover .fa {
right: 10px;
}