Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Button hover
<button class="skew-button"><span>Challenge instructions</span></button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>
<script src="http://dev.hoasting.net/_tim-codepen/gsap/utils/Draggable.min.js"></script>
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=132"></script>
@import 'https://fonts.googleapis.com/css?family=Anton';
* {
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
height: 100vh;
background-color: #071432;
}
// For demo purposes
.skew-button {
position: absolute;
left: 50%;
top: 50%;
}
// Skew button
// ==========================================================================
.skew-button {
cursor: pointer;
outline: none;
transform: translate3d(-50%, -50%, 0);
backface-visibility: hidden;
position: relative;
display: inline-block;
padding: 0;
background-color: transparent;
border: none;
font: 1.3rem 'Anton', sans-serif;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #fff;
// Text
span {
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
position: relative;
display: block;
width: 100%;
height: 100%;
padding: 20px 50px;
z-index: 3;
}
// Border
&:before,
span:before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) skewX(-20deg);
width: 100%;
height: 50px;
border: 1px solid #0e3876;
z-index: 2;
}
span:before {
display: block;
transform: translate(-50%, -50%) skew(-20deg);
transform-origin: center center;
z-indeX: -1;
}
// Fill
&:after {
transition: all 100ms ease-out;
content: '';
position: absolute;
left: 0;
top: 0;
transform: skewX(-20deg) scaleX(0);
width: 100%;
height: 100%;
background-color: #0e3876;
border: 1px solid transparent;
z-index: 1;
}
// Hover
&:hover {
span:before {
animation: fill .5s ease-out;
animation-fill-mode: forwards;
}
&:after {
animation: swoosh .7s ease-in;
}
}
// Active
&:active {
&:before {
background-color: darken(#0e3876, 20%);
}
}
}
// Animation
// ==========================================================================
@keyframes swoosh {
0% {
transform-origin: left center;
}
20% {
transform: skewX(-20deg) scaleX(1);
transform-origin: left center;
}
21% {
transform-origin: right center;
}
50% {
transform: skewX(-20deg) scaleX(0);
transform-origin: right center;
}
}
@keyframes fill {
0% {
background-color: rgba(#0e3876, 0);
}
20% {
opacity: .5;
border-width: 15px;
border-color: darken(#0e3876, 10%);
}
100% {
opacity: .5;
border-width: 1px;
background-color: rgba(#0e3876, 0.5);
}
}
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.