Flip background using CSS gradient color - HTML CSS CSS Property

HTML CSS examples for CSS Property:background-color

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. background-color

Description

Flip background using CSS gradient color

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

.button {<!--from   www .  ja  v a  2s .co m-->
   width: 200px;
   padding: 20px;
   display: inline-block;
   vertical-align: center;
   text-align: center;
   position: relative; 
   color: white;
}
.button:after {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: -1;
}
.button:active:after {
   -webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   -o-transform: rotate(180deg);
   transform: rotate(180deg);
}
.primary:after {
   background-color: yellow; 
   background-image: -webkit-linear-gradient(top, blue, yellow); /* For Chrome and Safari */
   background-image:    -moz-linear-gradient(top, blue, yellow); /* For old Fx (3.6 to 15) */
   background-image:     -ms-linear-gradient(top, blue, yellow); /* For pre-releases of IE 10*/
   background-image:      -o-linear-gradient(top, blue, yellow); /* For old Opera (11.1 to 12.0) */
   background-image:         linear-gradient(to bottom, blue, yellow); /* Standard syntax; must be last */
}
.secondary:after {
   background-color: grey; 
   background-image: -webkit-linear-gradient(top, brown, grey); /* For Chrome and Safari */
   background-image:    -moz-linear-gradient(top, brown, grey); /* For old Fx (3.6 to 15) */
   background-image:     -ms-linear-gradient(top, brown, grey); /* For pre-releases of IE 10*/
   background-image:      -o-linear-gradient(top, brown, grey); /* For old Opera (11.1 to 12.0) */
   background-image:         linear-gradient(to bottom, brown, grey); /* Standard syntax; must be last */
}


      </style> 
 </head> 
 <body> 
  <div class="button primary">
    My Primary Button 
  </div> 
  <div class="button secondary">
    My Secondary Button 
  </div>  
 </body>
</html>

Related Tutorials