基于css3的鼠标滑动按钮动画之CSS续_html/css_WEB-ITnose

btn2

/*--按钮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;}

btn5

/* 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);}

 focus

.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;}