Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
UI Button Hover Effect #2
.container
a.btn(href="#") hover me
//Lato font
@import url("https://fonts.googleapis.com/css?family=Lato:400,700");
//color/ui color variables
$white: #ececec;
$black: #111111;
$red1: #e74c3c;
$red2: #c92918;
$colorPrimary: $red1;
$colorSecondary: $red2;
$cubic-bezier:cubic-bezier(0.68, -0.55, 0.265, 1.55);
//split button mixin
@mixin btn__split($foregroundColor, $backgroundColor, $textColor) {
.btn {
//display: block;
position: relative;
letter-spacing: 0.15em;
margin: 0 auto;
padding: 1rem 2.5rem;
background: transparent;
outline: none;
font-size: 28px;
color: $textColor;
transition: all 0.5s $cubic-bezier 0.15s;
&::after,
&::before {
content: "";
position: absolute;
height: 40%;
width: 10%;
transition: all 0.5s $cubic-bezier;
z-index: -2;
border-radius: 50%;
//animation: grow 1s infinite;
}
&::before {
background-color: $backgroundColor;
top: -0.75rem;
left: 0.5rem;
animation: top 2s $cubic-bezier 0.25s infinite alternate;
}
&::after {
background-color: $foregroundColor;
top: 3rem;
left: 13rem;
animation: bottom 2s $cubic-bezier 0.5s infinite alternate;
}
&:hover {
color: white;
&::before,
&::after {
top: 0;
//transform: skewx(-10deg);
height: 100%;
width: 100%;
border-radius: 0;
animation: none;
}
&::after {
left: 0rem;
}
&::before {
top: 0.5rem;
left: 0.35rem;
}
}
}
}
*{
box-sizing:border-box;
}
body,html{
height: 100%;
}
body {
font-family: "Lato", sans-serif;
color: $black;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
}
.container {
width: auto;
margin: auto;
}
a {
text-transform: uppercase;
text-decoration: none;
font-weight: 700;
}
@keyframes top{
from{
transform: translate(0rem, 0);
}
to {
transform: translate(0rem, 3.5rem);
}
}
@keyframes bottom{
from{
transform: translate(-11.5rem, 0);
}
to{
transform: translate(0rem, 0);
}
}
@include btn__split($colorPrimary, $colorSecondary, $black);

UI Button Hover Effect #2

Made changes to my first Button Hover Effect pen. Added css animations to the pseudo elements. The button is a SASS Mixin.

A Pen by Daniel Gonzalez on CodePen.

License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.