Posted By

COBOLdinosaur on 04/21/15


Tagged

css html


Versions (?)

Transition Effect for Gradients on Hover


 / Published in: CSS
 

URL: http://coboldinosaur.com/pages/hover-effects-using-gradients.html

A simple transition from a linear gradient to a radial gradient can be made very dramatic by including a color change transition. One of 10 effects presented.

  1. #eight {
  2. background: linear-gradient(to bottom,
  3. rgba(2,62,31,.5),
  4. rgba(24,199,140,1),
  5. rgba(2,62,31,.5));
  6. color:maroon;
  7. transition:all, 2s;
  8. }
  9. #eight:hover {
  10. background:radial-gradient(5em circle,
  11. rgba(115,6,162,1),
  12. rgba(113,112,127,.5),
  13. rgba(115,6,162,1));
  14. color:white;
  15. transition:color, 2s;
  16. }

Report this snippet  

You need to login to post a comment.