Switching image on hover in a button - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Button

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Button

Description

Switching image on hover in a button

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum do</title> 
  <style>
.btn-large {<!--from www .j  av a  2 s  .  c  o m-->
   width:301px;
   height:351px;
}

.movie {
   width:91px;
   height:91px;
   position:relative;
   margin-top:26px;
}

#hardware:hover,
#hardware:active {
   background:Chartreuse;
   color:yellow;
}
</style> 
 </head> 
 <body translate="no"> 
  <a href="#" class="btn btn-large" id="hardware" onmouseover="this.getElementsByTagName('img')[0].src ='https://www.java2s.com/style/demo/Opera.png'" onmouseout="this.getElementsByTagName('img')[0].src = 'https://www.java2s.com/style/demo/InternetExplorer.png'"> 
   <figure> 
    <img class="movie" alt="ticket" src="https://www.java2s.com/style/demo/Firefox.png"> 
   </figure> 
   <div class="details"> 
    <h2>Lorem ipsum</h2> 
    <br> 
    <p>Lorem ipsum dolo</p> 
   </div> </a>  
 </body>
</html>

Related Tutorials