html 按钮悬停改变,HTML5/CSS3 3个按钮悬停动效

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Raleway:900);

@import url(http://fonts.googleapis.com/css?family=Slabo+27px);

body {

background: #ccc;

}

* {

font-family: Raleway;

}

.fein {

font-family: 'Slabo 27px', serif;

}

.wip {

font-family: 'Slabo 27px', serif;

font-size: 2.4em;

text-align: center;

letter-spacing: -3px;

}

.button {

margin: 0 auto;

margin-top: 10px;

width: 200px;

height: 50px;

background: #37b06d;

overflow: hidden;

text-align: center;

transition: 0.2s;

cursor: pointer;

border-radius: 5px;

}

.hover {

position: relative;

border: 2px solid white;

width: 200px;

height: 200px;

margin-top: -100px;

background: #34475e;

left: -250px;

transition: 0.3s;

transform: rotate(20deg);

opacity: 0.8;

}

.clic {

color: white;

transition: 0.3s;

}

.button:hover .hover {

left: -145px;

}

.button:hover .clic {

margin-left: 80px;

}

.sure {

margin-top: 37px;

margin-right: -135px;

color: white;

transform: rotate(-20deg);

}

.button:active {

box-shadow: 2px 2px 1px #888;

}

.button2 {

margin: 0 auto;

margin-top: 10px;

width: 200px;

height: 50px;

background: #34475e;

overflow: hidden;

text-align: center;

transition: 0.2s;

cursor: pointer;

border-radius: 50px;

}

.hoveur {

background: linear-gradient(rgba(255, 255, 255, 255), rgba(204, 204, 204, 204));

width: 200px;

height: 50px;

margin-top: -50px;

transform: rotate(40deg);

margin-left: -180px;

opacity: 0.3;

transition: 0.5s;

}

.button2:hover .hoveur {

margin-left: 180px;

}

.button3 {

margin: 0 auto;

margin-top: 10px;

width: 200px;

height: 50px;

background: #efc332;

overflow: hidden;

text-align: center;

transition: 0.2s;

cursor: pointer;

transition-delay: 0.3s;

}

.hauver {

background-color: transparent;

height: 50px;

width: 200px;

margin-top: -50px;

text-align: center;

margin-left: -200px;

transition: margin-left 0.3s, background-color 0.5s 0.3s;

}

p.blanc {

text-align: center;

color: white;

padding-top: 15px;

}

.button3:hover .hauver {

margin-left: 0px;

background-color: #df432f;

}