Posted By

bmayzure on 01/25/13

Tagged

link
CSS3

Versions (?)

Last Edited at 01/25/13 10:47am

Statistics

Viewed 922 times

Favorited by 0 user(s)

Related snippets

CSS3 Roll Links

/ Published in: CSS

Cross-browser roll link effect in CSS3. Works in IE 10+, Webkit (Chrome/Safari/etc), Opera, Gecko (Firefox/Seamonkey/etc). Degrades nicely for unsupported browsers.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

/* CSS3 ROLL LINKS */
 
.roll-link {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
 
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    -ms-perspective: 600px;
 
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -ms-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;
    -ms-transition: all 400ms ease;
 
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
 
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-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 );
    -ms-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%;
    -ms-transform-origin: 50% 0%;
 
    -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}
 
 
---------------
 
<!-- Companion HTML to make the CSS3 Roll Links work -->
 
<p><a class="roll-link" href="http://www.domain.com/"><span data-title="Click the link!">Click the link!</span></a></p>