How to Get Gradient Hover Colors to Work

It's often the small elements of web design code that can be the trickiest. Here's a simple tutorial to overcome a common struggle -- making gradient hover colors cooperate with transition effects.

Even the most skilled of designers and developers struggle with small little elements of code. One of the trickiest things to nail down are gradients and transition effects. They rarely play nicely with each other.

However, gradient hovers and transitions can give your web design and navigation a slight boost by emphasizing an icon or button a little more for your website visitors. This tutorial will help you avoid the tricky pitfalls of perfecting CSS gradients in order to create a seamless transition functionality.

HTML

The HTML is fairly simple, with a few Bootstrap 4 classes for spacing classes.

<section class="cta-btn">
  <div class="row no-gutters font-weight-bold">
    <div class="col-sm-6 py-4 gray-gradient text-center">
      <a class="text-uppercase text-primary" href="#">Start a new program</a>
    </div>
    <div class="col-sm-6 py-4 blue-gradient text-center">
      <a class="text-uppercase text-white" href="#">Get support on an existing program</a>
    </div>
  </div>
</section>

CSS

CSS styles are used to form your gradients and create the transition functionality.

.gray-gradient {
    background: #f5f5f5; 
    background: linear-gradient(to bottom, #fff 0%,#eae5e5  100%); 
}
.gray-gradient:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    background: linear-gradient(to bottom, #fff 0%,#d2cece 100%);
    transition: opacity .35s ease-in-out;
}

.blue-gradient {
	background: #0569b6 ; 
	background: linear-gradient(to bottom, #0569b6  0%,#04497e  100%); 
}
.blue-gradient:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #0569b6 ; 
    background: linear-gradient(to bottom, #0569b6  0%,#071633  100%); 
    transition: opacity .35s ease-in-out;
}

.blue-gradient a,
.gray-gradient a {
    position: relative;
    z-index: 1;
}

.blue-gradient:hover:before,
.gray-gradient:hover:before {
    opacity: 0;
}

Try this out for your own website! Before you code, be sure to check out the finished product on the JSFiddle below. In order to see just how this works, hover your mouse over either of the two buttons and notice the subtle (yet definitive) gradient differences before and after you hover.

Download from Github

Share on Facebook Tweet It