2014 버튼 효과 추세

Question

https://glass.eleks.com/의 탐색 버튼이 엄격하게 CSS3인지 아는 사람이 있습니까? 나는 내 웹 사이트에서 꽤 비슷한 것을 만들고 싶다. JQuery가 필요할 수도 있지만 확실하지 않습니다. 이것은 내가 현재 당긴 것입니다 ..

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

그것은 그보다 훨씬 더! 하지만 그렇습니다. 순수한 CSS3입니다. 전혀 자바 스크립트가 아닙니다.

다음은 전체 코드입니다. http://jsbin.com/ecuSEXIm/1/edit