Welcome!

Rolling links with CSS (Webdesigner Depot style)

Ever noticed those fancy rolling links on Webdesigner Depot articles? It's time to take that apart, how those links are created and share this valuable info about those rolling links to many many who all want to have those for themselves. 

Be notified, rolls don't work on IE. Sadly. They're very nice.

Ok, add this CSS to your website's stylesheet (e.g. styles.css). 

{code class="brush: css"}

/* ROLL LINKS */
.roll-link {
display: inline-block;
overflow: hidden;

vertical-align: top;

-webkit-perspective: 600px;
-moz-perspective: 600px;

-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;

}

.roll-link:hover {text-decoration:none;}

.roll-link span {
display: block;
position: relative;
padding: 0 2px;

-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;

-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
}
.roll-link:hover span {
background: #DD4D42;


-webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
-moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}

.roll-link span:after {
content: attr(data-title);

display: block;
position: absolute;
left: 0;
top: 0;
padding: 0 2px;

color: #fff;
background: #DD4D42;

-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;

-webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
-moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}

{/code}

 

Done editing CSS, now insert a weblink inside your text in your website. But pay attention on the formatting and inserting of the link.

Use this markup to add a rolling link (make sure to add class="roll-link" to your link):

{code class="brush: html"}

<a href="http://yourlink.com" title="Your link title" class="roll-link">

<span data-title="After roll text here">Link text put here</span></a>

{/code}

That code in action:

Link text put here

 

Works like magic. Hope you love it!

Source: github

You have no rights to post comments

Highly recommended

TransferWise - international money transfers half the price of the banks. Get one transfer for free.

ThemeForest - Joomla! and WordPress template marketplace


LikeLock - protect valuable links, trade them for a Like!Cover song contest and catalogue - Cover Toplist

Donate via PayPal

If any of my articles have helped you out from a difficult situation, feel free to buy me coffee!