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);
}