css3弹出来,CSS3弹出式按钮

CSS

语言：

CSSSCSS

确定

body {

background: tomato;

}

.overflow-hide {

height: 60px;

width: 190px;

display: block;

margin: 150px auto;

overflow: hidden;

position: relative;

}

.hole {

content: "";

display: block;

width: 190px;

position: absolute;

bottom: 0;

margin: 0 auto;

height: 10px;

border-radius: 20px;

background: black;

z-index: 0;

}

.button {

height: 60px;

width: 180px;

text-align: center;

line-height: 1.8;

color: white;

display: block;

position: relative;

background-color: #105f98;

margin: 0 auto;

-webkit-transform: translateY(30px);

transform: translateY(30px);

-webkit-transition: -webkit-transform 200ms ease-in-out;

transition: -webkit-transform 200ms ease-in-out;

transition: transform 200ms ease-in-out;

transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;

}

.button:after {

content: "";

display: block;

position: absolute;

width: 180px;

height: 5px;

background: black;

bottom: 0;

-webkit-transform: translateY(-30px);

transform: translateY(-30px);

-webkit-transition: -webkit-transform 200ms ease-in-out;

transition: -webkit-transform 200ms ease-in-out;

transition: transform 200ms ease-in-out;

transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;

}

.button:hover {

-webkit-transform: translateY(0);

transform: translateY(0);

}

.button:hover:after {

-webkit-transform: translateY(0);

transform: translateY(0);

}