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-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 );



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=”” title=”Your link title” class=”roll-link”>

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


That code in action:

Link text put here


Works like magic. Hope you love it!

Source: github

Post Author: Tom Pai