基于css3的鼠標(biāo)滑動(dòng)按鈕動(dòng)畫(huà)之CSS續(xù)_html/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;}