Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Cool link effects
<h1>Webdesigner Depot Rollover link effect</h1>
<a href="#" class="link1"><span data-title="Text Link">Text Link</span></a>
<h2>Cool Underline</h2>
<a href="#" class="link2">Text Link</a>
<h2>Show That Link</h2>
<a href="https://twitter.com/RiccardoZanutta" class="link3" target="_blank">Text Link</a>
<h2>Up</h2>
<a href="#" class="link4">Text Link</a>
<h2>Slide in</h2>
<div class="link5">
<a href="" class="link5"><span data-hover="Text Link">Text Link</span></a>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
@import "bourbon";
// Demo styles
body {
font-family: "Lato", sans-serif;
background: #92c7d6;
margin: 0;
color: #334;
-webkit-font-smoothing: antialiased;
text-align: center;
padding: 40px 20px;
line-height: 1.2em;
}
h1, h2 {
font-size: 2em;
margin: 40px 0;
}
@media only screen and(max-width: 680px) {
h1, h2 {
font-size: 1.3em;
}
}
a, a:link, a:visited {
text-decoration: none;
color: #03c;
}
/* Link 1 */
.link1 {
display: inline-block;
overflow: hidden;
vertical-align: top;
perspective: 600px;
perspective-origin: 50% 50%;
&:hover span {
background: #03c;
transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}
span {
display: block;
position: relative;
padding: 4px;
transition: all 400ms ease;
transform-origin: 50% 0%;
transform-style: preserve-3d;
&:after {
content: attr(data-title);
display: block;
position: absolute;
left: 0;
top: 0;
padding: 4px;
color: #fff;
background: #03c;
transform-origin: 50% 0%;
transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}
}
}
/* Link2 */
.link2 {
position: relative;
&:after {
content: '';
position: absolute;
bottom: -.4em;
left: 50%;
right: 50%;
height: 1px;
background: currentColor; // system color
transition: all ease .2s;
}
&:hover:after {
left: 0;
right: 0;
height: 2px;
}
&:before {
position: absolute;
transform: translateX(-100%);
left: -10px;
color: #eee;
opacity: .3;
font-weight: 100;
font-size: .8em;
}
}
/* Link 3 */
a[href*="http"], a[href*="."], .link3 {
position: relative;
&:hover {
text-decoration: underline;
}
&:active {
background: inherit;
color: inherit;
}
&:hover:before {
content: attr(href);
display: block;
border-color: #2678c6;
position: absolute;
top: -2.5em;
left: -3em;
padding: 0.35em;
background: #03c;
color: #f7f7f7;
font-size: .9em;
white-space: nowrap;
}
}
/* Link 4 */
.link4 {
display: inline-block;
transition-duration: 0.3s;
transition-property: transform;
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
&:hover {
transform: translateY(-3px);
color: lighten(#03c, 15%);
}
}
/* Link 5 */
.link5 {
overflow: hidden;
padding: 0 4px;
height: 1em;
a {
span {
&:before {
position: absolute;
top: 100%;
content: attr(data-hover);
font-weight: 700;
transform: translate3d(0,0,0);
}
}
}
span {
position: relative;
display: inline-block;
transition: transform 0.3s;
}
&:hover span,
&:focus span {
transform: translateY(-100%);
}
}
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.