How to Create 3D Rolling Link Effect Using CSS in Blogger

Everything is possible with the power of CSS. You can do whatever you want using CSS. While customizing your template or adding effects to blog elements, everything you do for beautifying your blog is based on CSS and today we are also going to share a beautiful CSS effect known as 3D Rolling Link Effect. I hope that you'll love it and this effect will make your blog different and unique from other blogs. So without any further delay let’s install this 3D Rolling Link Effect. All you need is just to add the CSS code first and then the HTML for that link. See how it looks and play with it on jsfiddle.net, hove the text in the results section to see how it looks.

Create 3D Rolling Link Effect Using CSS in Blogger

First and foremost log in to your Blogger Account >> Select your Blog >> Template >> click Edit HTML >> click inside the code area and use Ctrl+F to search and search for the following tag

]]></b:skin>

Now copy the below code and paste it just above/before it (]]></b:skin> tag)

.bgt-roll-link {
    color: #2aa4cf;
    text-decoration: none;
    font-weight:bold;
    display: inline-block;
    overflow: hidden;
    vertical-align: top;

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

    -webkit-perspective-origin: 50% 50%;
       -moz-perspective-origin: 50% 50%;
       -ms-perspective-origin: 50% 50%;
       perspective-origin: 50% 50%;
}
.bgt-roll-link:hover {text-decoration:none; color: #2aa4cf; font-weight:bold;}
.bgt-roll-link span {
    display: block;
    position: relative;
    padding: 0 2px;

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

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

    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
       -ms-transform-style: preserve-3d;
       transform-style: preserve-3d;
}
.bgt-roll-link:hover span {
        background: #2aa4cf;

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

.bgt-roll-link span:after {
    content: attr(data-title);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 2px;
    color: #fff;
    background: #2aa4cf;

    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    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 );
    transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
    a.roll-link:link, a.roll-link:visited{color:red;}
}

Hit the Save Template button. Now the HTML, copy the HTML code below and paste it where you want to use this effect.

<a class="bgt-roll-link" href="http://blogolect.com/"><span data-title="Blogolect - All About Blogging">Blogolect - All About Blogging</span></a>

Customization:

Replace Blogolect - All About Blogging and Blogolect - All About Blogging with your Link text.

Replace http://blogolect.com/ with your Link.

To use this link effect in your blogger blog posts, switch your post editor to HTML mode and add the above HTML code where you want to use it.
Congratulations: You've successfully added this 3D Rolling Link Effect to your blog.

From Editors Desk

We hope this tutorial may have helped you in creating a 3D Rolling Link Effect for your Blog. Share this post with your friends and don't forget to subscribe us. Got a Question? Let us know in the comments section below.