基于css3的鼠标滑动按钮动画之CSS--续

/*--按钮1--*/
.container1 {
width:200px;
display:block;
margin:20px auto;
position:relative;
font-family:droid arabic kufi;
}
.con_down1 {
display:block;
cursor:pointer;
background-color:#F6EB96;
width:190px;
height:50px;
padding-left:10px;
padding-top:5px;
text-align:left;
border-bottom:4px solid #D8B83C;
border-radius:5px;
position:relative;
line-height:50px;
}
.con_down1 .fa-download{
position:absolute;
right:10px;
top:15px;color:#895D0A;
}
.con_down1 h4 {
color:#895D0A;
text-transform:uppercase;
margin:0;
}
.sizes1 h5 {
margin:0;
}
.sizes1 {
background-color:#E3E3E3;
width:100px;
height:30px;
z-index:-9;
padding-top:2px;
border-bottom:4px solid #AAA9A9;
position:absolute;
top:13px;
left:20px;
transition:.5s all ease-in-out;
}
.size {
line-height:30px;
text-align:center;
color:#4B4B4B;
}
.sizes_abs1 {
background-color:#F6EB96;
cursor:pointer;
width:20px;
border-bottom:4px solid #D8B83C;
border-bottom-left-radius:5px;
border-top-left-radius:5px;
height:55px;
position:absolute;
top:-13px;
left:-20px;
z-index:2;
}
.container1:hover .sizes1 {
left:-100px;
}
.container1:hover .con_down1 {
background-color:#F1DD5E;
border-bottom-left-radius:0;
border-top-left-radius:0;
}
.container1:hover .sizes_abs1 {
background-color:#F1DD5E;
}

/*--按钮2--*/
.container2 {
width:200px;
display:block;
margin:20px auto;
position:relative;
font-family:droid arabic kufi;
}
.con_down2 {
display:block;
cursor:pointer;
background-color:#F6EB96;
width:190px;
height:50px;
padding-left:10px;
padding-top:5px;
text-align:left;
border-bottom:4px solid #D8B83C;
border-radius:5px;
position:relative;
line-height:50px;
transition:.5s all ease-in-out;
}
.con_down2 .fa-download {
position:absolute;
right:10px;
top:15px;
color:#895D0A;
}
.con_down2 h4 {
color:#895D0A;
text-transform:uppercase;
margin:0;
}
.sizes2 h5 {
margin:0;
}
.sizes2 {
background-color:#E3E3E3;
width:100px;
height:30px;
z-index:-9;
position:absolute;
bottom:22px;
right:50%;
margin-right:-50px;
transition:.5s all ease-in-out;
}
.size {
line-height:30px;
text-align:center;
color:#4B4B4B;
}
.sizes_abs2 {
background-color:#F6EB96;
cursor:pointer;
width:200px;
border-bottom:4px solid #D8B83C;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
height:20px;
position:absolute;
left:-50px;
bottom:-22px;
z-index:2;
}
.container2:hover .sizes2 {
bottom:-30px;
}
.container2:hover .con_down2 {
background-color:#F1DD5E;
border-bottom:0;
border-bottom-left-radius:0;
border-bottom-right-radius:0;
}
.container2:hover .sizes_abs2 {
background-color:#F1DD5E;
}

/* Custom Button */
.whitebutton {
margin: 0 auto;
width: 200px;
}
.whitebutton a {
background: #dddddd;
color: #666;
display: block;
font-size: 17px;
font-weight: 700;
font-family: 'Droid Arabic Kufi',Verdana,sans-serif;
height: 50px;
line-height: 50px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 200px;
position: relative;
z-index: 2;
}
.whitebutton a:before {
content: '\f019';
font-family: FontAwesome;
font-weight: normal;
padding: 8px;
margin-left: 0px;
margin-right: 30px;
}
.whitebutton span {
background: #444;
color: #fff;
display: block;
font-size: 12px;
font-family: 'Droid Arabic Kufi', Verdana,sans-serif;
height: 40px;
line-height: 40px;
text-align: center;
width: 200px;
z-index: 1;
text-transform: uppercase;
font-weight: bold;
}
.whitebutton .up {
height: 40px;
background: #e25734;
margin: 0px auto;
opacity: 0;
border-radius: 0 0 5px 5px;
transform: translate(0,-50px);
transition: 350ms;
}
.whitebutton .down {
height: 40px;
margin: -40px auto;
opacity: 0;
border-radius: 5px 5px 0 0;
transform: translate(0,-50px);
transition: 350ms;
}
.whitebutton .down:before {
content:'\f14a';
font-family: FontAwesome;
font-weight: normal;
margin-left: -6px;
color: #aaa;
}
.whitebutton:hover .up {
opacity: 1;
transform: translate(0,0);
}
.whitebutton:hover .down {
opacity: 1;
transform: translate(0,-90px);
}
.whitebuttondemo {
margin: 20px auto;
padding: 20px 0;
width: 200px;
}
.whitebuttondemo a {
background: #e25734;
color: #fff;
display: block;
font-size: 17px;
font-weight: 700;
font-family:'Droid Arabic Kufi',Verdana,sans-serif;
height: 50px;
line-height: 50px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 200px;
position: relative;
z-index: 2;
transition: 350ms;
}
.whitebuttondemo a:before {
content:'\f002';
font-family: FontAwesome;
font-weight: normal;
padding: 8px;
margin-left: 0px;
margin-right: 30px;
}
.whitebuttondemo a:hover {
color: #fff;
}
.whitebuttondemo span {
background: #444;
color: #fff;
display: block;
font-size: 12px;
font-family: 'Droid Arabic Kufi', Verdana,sans-serif;
height: 40px;
line-height: 40px;
text-align: center;
width: 200px;
z-index: 1;
text-transform: uppercase;
font-weight: bold;
}
.whitebuttondemo .up {
background: #444;
margin: 0px auto;
opacity: 0;
border-radius: 0 0 5px 5px;
transform: translate(0,-50px);
transition: 350ms;
}
.whitebuttondemo:hover .up {
opacity: 1;
transform: translate(0,0);
}

.zoomeffect img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}
.zoomeffect img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}