Slide element down for hover - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Hover on list

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Hover on list

Description

Slide element down for hover

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

#contact-form .submit {
   background: none repeat scroll 0 0 #3f3f3f;
   display: block;
   margin-top: 30px;
   padding: 16px 40px;
   width: 115px;
}
.contact-submit a {
   color: #222;
   font-weight: normal;
}
#contact-form > .contact-submit > .my {
   display: inline-block;
   vertical-align: middle;<!--from  w w w  . j av  a2 s  . c om-->
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -moz-osx-font-smoothing: grayscale;
   position: relative;
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s;
   -webkit-transition-property: transform;
   transition-property: transform;
   top: 0;
}
#contact-form > .contact-submit > .my:before {
   position: absolute;
   z-index: -1;
   content: '';
   left: calc(50% - 10px);
   top: 0;
   border-style: solid;
   border-width: 0 10px 10px 10px;
   border-color: transparent transparent #666 transparent;
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s;
   -webkit-transition-property: transform;
   transition-property: transform;
}
#contact-form > .contact-submit > .my:hover, #contact-form > .contact-submit > .my:focus, #contact-form > .contact-submit > .my:active {
   -webkit-transform: translateY(10px);
   transform: translateY(10px);
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s;
   display: inline-block;
   background-color: #666;
   border-color: transparent transparent #666 transparent !important;
}
#contact-form > .contact-submit > .my:hover:before, #contact-form > .contact-submit > .my:focus:before, #contact-form > .contact-submit > .my:active:before {
   -webkit-transform: translateY(-10px);
   transform: translateY(-10px);
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s;
   position: absolute;
   z-index: 5000;
   border-bottom-color: red;
}


      </style> 
 </head> 
 <body> 
  <form id="contact-form"> 
   <p class="contact-submit"> <a id="contact-submit" class="submit my" href="#">SEND MESSAGE</a> </p> 
  </form>  
 </body>
</html>

Related Tutorials