html中button阴影样式,CSS3 按钮悬停效果 3D背光阴影

CSS

语言：

CSSSCSS

确定

body {

font-family: 'Lato', sans-serif;

margin: 40px 1em;

}

li {

display: block;

float: left;

margin-left: 1em;

}

li:first-child {

margin-left: 0;

}

.thing {

background-color: #2980b9;

border-radius: 5px;

color: white;

display: inline-block;

letter-spacing: .1em;

line-height: 40px;

overflow: hidden;

padding: 0 3em;

position: relative;

text-decoration: none;

text-transform: uppercase;

z-index: 5150;

}

.thing:before {

background-color: #2e8ece;

border-radius: 5px;

content: '';

height: 0;

left: -2.5%;

position: absolute;

bottom: -3px;

-webkit-transform: scaleY(1.3) perspective(0.5em) rotateX(5deg);

transform: scaleY(1.3) perspective(0.5em) rotateX(5deg);

-webkit-transform-origin: bottom;

-ms-transform-origin: bottom;

transform-origin: bottom;

-webkit-transition: height .6s;

transition: height .6s;

width: 105%;

z-index: -1;

}

.thing:after {

background-color: #fff;

content: '';

position: absolute;

height: 1px;

top: 30px;

left: 50%;

-webkit-transition: width .3s, left .3s;

transition: width .3s, left .3s;

width: 0;

z-index: -1;

}

.thing:hover:before {

height: 40px;

-webkit-transition: height .3s;

transition: height .3s;

}

.thing:hover:after {

left: 25%;

width: 50%;

-webkit-transition: width .3s .2s, left .3s .2s;

transition: width .3s .2s, left .3s .2s;

}

.thing:active {

margin-top: 1px;

}

.thing:active:after {

left: 50%;

width: 0;

-webkit-transition: width .3s .2s, left .3s .2s;

transition: width .3s .2s, left .3s .2s;

}