These are pretty nice hover styles, admittedly.
A Pen by Matthew Pasteris on CodePen.
These are pretty nice hover styles, admittedly.
A Pen by Matthew Pasteris on CodePen.
<h1>Best of ever hawt linkz hover styles: Flex Edition</h1> | |
<section class="links flex-container"> | |
<a class="link wipe flex-item" href="#">wipe</a> | |
<a class="link underline flex-item" href="#">underline</a> | |
<a id="slide-link" class="link slide flex-item" href="#"><span>slide</span></a> | |
<a class="link opacity flex-item" href="#">opacity</a> | |
</section> |
var $slideLink = $("#slide-link"), | |
slideLinkText = $slideLink.find("span")[0]; | |
$slideLink.on("mouseenter", linkOver); | |
function linkOver() { | |
TweenLite.to(slideLinkText, 0.3, {y: -25, ease: Cubic.easeIn, onComplete: function() { | |
TweenLite.fromTo(slideLinkText, 0.3, {y: 25}, {y: 0, ease: Cubic.easeOut}) | |
}}); | |
} |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenLite.min.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/easing/EasePack.min.js"></script> |
@import url(https://fonts.googleapis.com/css?family=Oswald); | |
body { | |
background: #1e7a90; | |
color: #fff; | |
font-family: "Oswald", Arial, sans-serif; | |
text-align: center; | |
} | |
h1 { | |
width: 100%; | |
text-align: center; | |
letter-spacing: 0.02em; | |
margin: 2em 0; | |
} | |
.links { | |
width: 90%; | |
margin: 0 auto; | |
} | |
.link { | |
display: inline-block; | |
min-width: 120px; | |
max-width: 320px; | |
min-height: 34px; | |
line-height: 36px; | |
text-transform: uppercase; | |
text-decoration: none; | |
color: #fff; | |
letter-spacing: 0.1em; | |
text-align: center; | |
font-size: 0.8rem; | |
margin: 10px; | |
position: relative; | |
justify-content: center; | |
} | |
.link span { | |
position: absolute; | |
height: 100%; | |
width: 100%; | |
top: 0; | |
left: 0; | |
text-align: center; | |
} | |
.wipe, .slide, .opacity { | |
border: 2px solid #fff; | |
border-radius: 4px; | |
overflow: hidden; | |
} | |
.opacity { | |
transition: background-color 0.3s linear, color 0.3s linear; | |
background: rgba(255, 255, 255, 0); | |
} | |
.opacity:hover { | |
color: #124a58; | |
background: rgba(255, 255, 255, 0.9); | |
} | |
.wipe { | |
transition: color 0.3s ease-out; | |
} | |
.wipe::after { | |
width: 100%; | |
height: 100%; | |
display: block; | |
background-color: #fff; | |
content: " "; | |
position: absolute; | |
top: 0; | |
transition: -webkit-transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); | |
transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); | |
transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); | |
-webkit-transform: translateY(34px); | |
transform: translateY(34px); | |
z-index: -1; | |
} | |
.wipe:hover { | |
color: #124a58; | |
} | |
.wipe:hover::after { | |
-webkit-transform: translateY(0px); | |
transform: translateY(0px); | |
} | |
.underline { | |
border: 2px solid transparent; | |
} | |
.underline::after { | |
width: 0%; | |
height: 2px; | |
display: block; | |
background-color: #fff; | |
content: " "; | |
position: absolute; | |
top: 34px; | |
left: 50%; | |
transition: left 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); | |
} | |
.underline:hover::after { | |
width: 100%; | |
height: 2px; | |
display: block; | |
background-color: #fff; | |
content: " "; | |
position: absolute; | |
top: 34px; | |
left: 0; | |
} | |
.flex-container { | |
display: -ms-flexbox; | |
display: -webkit-flex; | |
display: flex; | |
-webkit-flex-direction: row; | |
-ms-flex-direction: row; | |
flex-direction: row; | |
-webkit-flex-wrap: wrap; | |
-ms-flex-wrap: wrap; | |
flex-wrap: wrap; | |
-webkit-justify-content: space-around; | |
-ms-flex-pack: distribute; | |
justify-content: space-around; | |
-webkit-align-content: stretch; | |
-ms-flex-line-pack: stretch; | |
align-content: stretch; | |
-webkit-align-items: flex-start; | |
-ms-flex-align: start; | |
align-items: flex-start; | |
} | |
.flex-item:nth-child { | |
-webkit-order: 0; | |
-ms-flex-order: 0; | |
order: 0; | |
-webkit-flex: 0 1 auto; | |
-ms-flex: 0 1 auto; | |
flex: 0 1 auto; | |
-webkit-align-self: auto; | |
-ms-flex-item-align: auto; | |
align-self: auto; | |
} |