jQuery Plugin: Horizontally Rolling Buttons and Hyperlinks

jQuery Plugin: Horizontally Rolling Buttons and Hyperlinks

Horizontally Rolling Buttons and Hyperlinks
Hello Friends! Today we are going to take a look on the Horizontal rolling effect on the links. For this I have created a simple to use plugin with which you can easily create a simple horizontally rolling link. Basically its achieved by both CSS and javascript. Mainly by CSS and to reduce the complexity jQuery is used.

For this we will see the basic things required to get it on the working stage. First of all we will see the HTML markup for the desired rolling links.

<a title="Hover Me and Click Me" href="#"> I am Hyperlink </a>

That’s it for HTML part.  Now we’ll see the magic part i.e the javascript part.

<script src="jquery.rollingButtons.js"></script>
<script type="text/javascript">
$(document).ready(function(e){
  $('a').rollingButtons({
    background: '#5F85B0',
    color: '#fff'
  });
});
</script>

It will convert all the anchor tags to the rolling links. You can customize the colors of the rolled link by supplying a basic option of background and color:

{
  background: '#5F85B0',
  color: '#fff'
}

Here is the basic preview of the rolling hyperlinks

Rolling Links

One thing to note is that the rolling effect is completely done by the CSS though we have not included any CSS. The jQuery plugin makes the necessary changes in the color of font and its background and attaches the CSS to the document.  So the browsers which support the 3D rotation features of CSS will only be able to render the perfect rolling view of the links.

Rest of the browsers  will only render simple normal hyperlinks.

Demo  Download   View in GitHub