<div class="offer__button">
<a href="btn"><span data-hover="Get in touch">Get in touch</span></a>
</div>
.offer__button {
margin-top: 27px;
}
.offer__button a {
position: relative;
display: inline-block;
color: #fff;
text-transform: uppercase;
font-size: 0.875rem;/*14px*/
}
/*Hover 3D side */
.offer__button a:hover,
.offer__button a:focus {
outline: none;
}
/* Effect 20: 3D side */
.offer__button a {
line-height: 2em;
-webkit-perspective: 800px;
-moz-perspective: 800px;
perspective: 800px;
}
.offer__button a span {
position: relative;
display: inline-block;
width: 165px;
height: 49px;
font-weight: 700;
text-align: center;
padding: 7px 15px;
background:#fff;
color: #7beec7;
-webkit-transition: background 0.6s;
-moz-transition: background 0.6s;
transition: background 0.6s;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
.offer__button a span::before {
position: absolute;
top: 0;
left: 0;
padding: 7px 15px;
width: 100%;
height: 100%;
background: #7beec7;
color: #fff;
border: 2px solid transparent;
content: attr(data-hover);
-webkit-transform: rotateX(270deg);
-moz-transform: rotateX(270deg);
transform: rotateX(270deg);
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
transition: transform 0.6s;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
pointer-events: none;
}
.offer__button a:hover span,
.offer__button a:focus span {
background: #7beec7;
border-color: #fff;
}
.offer__button a:hover span::before,
.offer__button a:focus span::before {
-webkit-transform: rotateX(10deg);
-moz-transform: rotateX(10deg);
transform: rotateX(10deg);
border-color: #fff;
}
.offer__button a span:active {
transform: translateY(2px);
}
hover-rotate(270deg)
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.