Make gif button only play when hovering - HTML CSS CSS Form

HTML CSS examples for CSS Form:input button hover

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input button hover

Description

Make gif button only play when hovering

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">

.car_btn {<!--from  w w  w .  j  a  v a  2 s.  c  o m-->
   height: auto;
   padding: 10px;
   line-height: 50px;
   text-align: left;
   text-indent: 10px;
   font-size: 16px;
   color: #333;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   border: 1px solid #333;
   background-color: transparent;
   cursor: pointer;
   margin: 20px;
}
.car_btn:hover {
   background-color: #F7F7F7;
}
.car_btn img {
   float: left;
}


      </style> 
 </head> 
 <body> 
  <button class="car_btn"> <img src="https://www.java2s.com/style/demo/Safari.png" onmouseenter="this.src =`http://i.imgur.com/80Q4rzw.gif`;" onmouseout="this.src ='http://i.imgur.com/O2X6soK.png';" alt="something pithy"> Click Here </button>  
 </body>
</html>

Related Tutorials