2014年按钮效应趋势

时间:2014-01-26 19:03:46

标签: html css3 button

有人知道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;
}

1 个答案:

答案 0 :(得分:1)

它远不止于此!但是,它是纯CSS3,完全没有JavaScript。

以下是完整代码:http://jsbin.com/ecuSEXIm/1/edit