https://github.com/pankajpatel/rolling-buttons
Rolling Buttons
https://github.com/pankajpatel/rolling-buttons
Last synced: 4 months ago
JSON representation
Rolling Buttons
- Host: GitHub
- URL: https://github.com/pankajpatel/rolling-buttons
- Owner: pankajpatel
- Created: 2013-07-26T23:31:56.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T11:44:22.000Z (over 1 year ago)
- Last Synced: 2025-02-18T03:03:08.842Z (4 months ago)
- Language: JavaScript
- Homepage: http://pankajpatel.github.io/rolling-buttons/
- Size: 4.88 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
rolling-buttons jQuery plugin
-------------------------
This plugin creates the selected hyperlinks as rolling hyperlinks
```html
$(document).ready(function(e){
$('a').rollingButtons({ background: '#5F85B0', color: '#fff'});
});
Time to Hack
```
-----------------------------------------------------------------------------
It does not require any explicit CSS or html. Though if you wanna add the css added by plugin to your regular CSS/LESS/SCSS files; you can add the following code block:
```css
.rollers {
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%;
}
.rollers:hover {
text-decoration:none;
}
.rollers span {
display: block;
position: relative;
padding: 0 2px;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
transition: all 400ms 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;
}
.rollers:hover span {
background:'+ options.background +';
-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);
}
.rollers span:after {
content: attr(data-title);
display: block;
position: absolute;
left: 0;
top: 0;
padding: 0 2px;
color:'+options.color+';
background:'+ options.background +';
-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);
}
```
And if you have added above css in your CSS files, you can initiate the plugi as following code:
```javascript
$(document).ready(function(e){
$('a').rollingButtons({ background: '#5F85B0', color: '#fff', style: false, className: 'rollers' });
});
```
Just try and play with it