Manipulate background on hover for gradient background - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Hover to change Color

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Hover to change Color

Description

Manipulate background on hover for gradient background

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">
a {<!--   www.ja v a 2s.  c  o  m-->
   background:Chartreuse;
   background:-webkit-linear-gradient(yellow, blue);
   background:-moz-linear-gradient(pink, OrangeRed);
   background:-o-linear-gradient(grey, BlueViolet);
   background:linear-gradient(Chartreuse, yellow);
   filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='blue', endColorstr='pink',GradientType=0 );
   background-size:2px 201px;
   border-radius:9px;
   color:OrangeRed;
   cursor:pointer;
   display:block;
   font-size:2.5em;
   height:100px;
   line-height:100px;
   text-decoration:none;
   text-align:center;
   width:201px;
   -webkit-transition:background 2s ease-out;
   -moz-transition:background 2s ease-out;
   -o-transition:background 2s ease-out;
   transition:background 2s ease-out;
}

a:hover {
   background-position:100px;
}

body {
   padding:5em;
}
</style> 
 </head> 
 <body> 
  <a href="#">Lorem </a>  
 </body>
</html>

Related Tutorials