Special html item - Button with rolling effect
With these codes you can create a button with rolling effect.
Base code
- 1
-
Create a HTML layer and put these codes into the HTML field:
<a href="#" target="_blank" class="rolling sliderfont5" style="background: none;"> <div class="container"> <div class="front">Front text</div> <div class="top">Hover text</div> </div> </a>
- 2
-
And put these codes to the CSS field:
.rolling { display: block; height: 60px; line-height: 60px !important; text-align: center !important; -webkit-perspective: 500px; perspective: 500px; position: relative; width: 100%; z-index: 1; text-decoration: none; } .rolling .container { height: 100%; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(0px, 0px, -30px); transform: translate3d(0px, 0px, -30px); transform-style: preserve-3d; transition: all 0.2s ease-in-out 0s; width: 100%; } .rolling .container .front { background: #353f48 !important; -webkit-transform: translate3d(0px, 0px, 30px); transform: translate3d(0px, 0px, 30px); } .rolling .container .top { background: #7670c7; -webkit-transform: rotateX(90deg) translate3d(0px, 0px, 90px); transform: rotateX(90deg) translate3d(0px, 0px, 90px); } .rolling .container > div { color: white; outline: 1px solid transparent; } .rolling .container:hover { cursor: pointer; -webkit-transform: rotateX(-90deg) translate3d(0px, 25px, 0px); transform: rotateX(-90deg) translate3d(0px, 25px, 0px); }
How add a link to the button?
You can change the # at the HTML field, here:
<a href="#" target="_blank" class="rolling sliderfont5" style="background: none;">
to the URL where you'd like the button to point, like this:
<a href="http://nextendweb.com" target="_blank" class="rolling sliderfont5" style="background: none;">
How to change the color?
You can find the colors at the CSS Field, here:
.rolling .container .front { background: #353f48 !important; -webkit-transform: translate3d(0px, 0px, 30px); transform: translate3d(0px, 0px, 30px); } .rolling .container .top { background: #7670c7; -webkit-transform: rotateX(90deg) translate3d(0px, 0px, 90px); transform: rotateX(90deg) translate3d(0px, 0px, 90px); }
and the part you should modify is the background.
If you would like to change the font color, just add the color property, like this:
.rolling .container .front { background: #353f48 !important; color: #00ff00; -webkit-transform: translate3d(0px, 0px, 30px); transform: translate3d(0px, 0px, 30px); } .rolling .container .top { background: #7670c7; color: #016611; -webkit-transform: rotateX(90deg) translate3d(0px, 0px, 90px); transform: rotateX(90deg) translate3d(0px, 0px, 90px); }