Animation of mouse slide buttons based on CSS3 css--Cont.

Btn2

/*--Button 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;} /*--Button 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;   &nBsp;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;}

Animation of mouse slide buttons based on CSS3 css--Cont.