Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Button Hover Effect
.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: #333333;
$yellow: #ffff00;
$purple: #8a19ff;
$colorPrimary: $yellow;
$colorSecondary: $purple;
//split button mixin
@mixin btn__split($colorLeft, $colorRight, $textColor) {
.btn {
position: relative;
letter-spacing: 0.25em;
margin: 0 auto;
padding: 1rem 2.5rem;
background: transparent;
outline: none;
font-size: 28px;
color: $textColor;
&::after,
&::before {
content: "";
position: absolute;
height: 100%;
width: 50%;
transform: skewX(30deg);
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
z-index: -2;
}
&::before {
background-color: $colorLeft;
top: -1rem;
left: 0rem;
}
&::after {
background-color: $colorRight;
top: 1rem;
left: 8rem;
}
&:hover {
&::before,
&::after {
top: 0;
transform: skewx(0deg);
}
&::after {
left: 0rem;
}
&::before {
left: 8.75rem;
}
}
}
}
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;
}
@include btn__split($colorPrimary, $colorSecondary, $black);
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.