2014 Button Effect Trend [closed] - html

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Does anyone know if the explore button on https://glass.eleks.com/ is strictly CSS3? I would like to create something fairly similar on my website. It may require JQuery but I'm not sure. This is what I have currently pulled..
HTML
<div class="main-screen show">
<div class="main-screen-wrapper ">
<div class="start-exploring show">
<div class="button"><span></span>Explore</div>
<div class="bottom-line"></div>
<div class="right-border"></div>
<div class="top-border"></div>
<div class="left-border"></div>
<div class="bottom-border"></div>
<div class="rectangle-border"></div>
</div>
</div>
</div>
CSS
.main-screen.show {
background: rgba(0, 80, 200, 0.2);
}
.main-screen {
position: absolute;
z-index: 130;
width: 100%;
height: 100%;
background: #05092c;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#3A124080', endColorstr='#3A124080');
text-align: center;
-webkit-transition: background 3s;
-moz-transition: background 3s;
-ms-transition: background 3s;
-o-transition: background 3s;
transition: background 3s;
}
.start-exploring.show {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0);
opacity: 1;
}
.start-exploring.show {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0);
opacity: 1;
}
.main-screen .start-exploring {
-webkit-transform: perspective(500px) rotateX(-70deg);
-webkit-transform-origin: center center;
-moz-transform: perspective(500px) rotateX(-70deg);
-moz-transform-origin: center center;
-ms-transform: perspective(500px) rotateX(-70deg);
-ms-transform-origin: center center;
-o-transform: perspective(500px) rotateX(-70deg);
-o-transform-origin: center center;
transform: perspective(500px) rotateX(-70 deg);
transform-origin: center center;
opacity: 0;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.start-exploring {
display: inline-block;
margin-top: 50px;
cursor: pointer;
position: relative;
}
.start-exploring .button {
background: rgba(5, 9, 44, 0.5);
width: 320px;
height: 60px;
font-size: 20px;
line-height: 60px;
text-transform: uppercase;
color: #ffffff;
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 400;
letter-spacing: 8px;
}
.start-exploring.show .bottom-line {
-webkit-animation: start-exploring-show 1s linear;
-moz-animation: start-exploring-show 1s linear;
-ms-animation: start-exploring-show 1s linear;
-o-animation: start-exploring-show 1s linear;
animation: start-exploring-show 1s linear;
}
.start-exploring .bottom-line {
position: absolute;
width: 150px;
height: 2px;
background: #19f5e8;
bottom: 0;
left: 0;
right: 0;
margin: auto;
-webkit-transition: all .05s linear;
-moz-transition: all .05s linear;
-ms-transition: all .05s linear;
-o-transition: all .05s linear;
transition: all .05s linear;
}
.right-border {
position: absolute;
width: 2px;
height: 0px;
background: #19f5e8;
bottom: 0;
right: 0;
margin: auto;
}
.top-border {
position: absolute;
width: 0px;
height: 2px;
background: #19f5e8;
top: 0;
right: 0;
margin: auto;
}
.left-border {
position: absolute;
width: 2px;
height: 0px;
background: #19f5e8;
top: 0;
left: 0;
margin: auto;
}
.bottom-border {
position: absolute;
width: 0px;
height: 2px;
background: #19f5e8;
bottom: 0;
left: 0;
margin: auto;
}
.rectangle-border {
position: absolute;
top: 0;
width: 100%;
height: 100%;
outline-color: rgba(255,255,255,1);
outline-style: solid;
outline-width: 0;
-webkit-transform: scale(1,1);
-webkit-transform-origin: center center;
-moz-transform: scale(1,1);
-moz-transform-origin: center center;
-ms-transform: scale(1,1);
-ms-transform-origin: center center;
-o-transform: scale(1,1);
-o-transform-origin: center center;
transform: scale(1,1);
transform-origin: center center;
}

Answer 1

It's a lot more than that! But yes it's pure CSS3, no JavaScript at all.
Here's the full code: http://jsbin.com/ecuSEXIm/1/edit