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.
.container | |
button.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) { | |
button.btn { | |
text-transform: uppercase; | |
text-decoration: none; | |
font-weight: 700; | |
border: 0; | |
//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 { | |
border: 0; | |
content: ""; | |
position: absolute; | |
height: 40%; | |
width: 10%; | |
transition: all 0.5s $cubic-bezier; | |
z-index: -2; | |
border-radius: 50%; | |
//animation: grow 1s infinite; | |
} | |
&::before { | |
border: 0; | |
background-color: $backgroundColor; | |
top: -0.75rem; | |
left: 0.5rem; | |
animation: topAnimation 2s $cubic-bezier 0.25s infinite alternate; | |
} | |
&::after { | |
background-color: $foregroundColor; | |
top: 3rem; | |
left: 13rem; | |
animation: bottomAnimation 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 topAnimation { | |
from { | |
transform: translate(0rem, 0); | |
} | |
to { | |
transform: translate(0rem, 3.5rem); | |
} | |
} | |
@keyframes bottomAnimation { | |
from { | |
transform: translate(-11.5rem, 0); | |
} | |
to { | |
transform: translate(0rem, 0); | |
} | |
} | |
@include btn__split($colorPrimary, $colorSecondary, $black); |