CSS - Smooth Button Gradient Color Transition on Hover

CSS - smooth button gradient color transition on hover

Short answer, you can't using just background. However, you can achieve a similar effect using other elements (or pseudo elements) inside and fading them in on hover.

The following example uses two pseudo-elements as the two background states. On hover, we simply fade-in the new background giving a similar transition effect that would happen if gradients were transition-able.

NOTE: Not all browsers support transitions on pseudo elements, so you may need to add empty elements to achieve the same effect on older/unsupported browsers.

.cta-btn {  position: relative;  display: inline-block;  margin: 20px 0 0 20px;  color: #fff;  box-shadow: 4px 5px 27px 4px rgba(220, 120, 184, 0.85);  font-size: 21px;  border-radius: 30px;  overflow: hidden;  padding: 12px 21px;  font-family: Montserrat;  transition: box-shadow.3s ease-in-out;  text-decoration: none;}
/* These are the two backgrounds, absolutely positioned to cover. */.cta-btn::before,.cta-btn::after {  content: '';  display: block;  position: absolute;  left: 0;  top: 0;  bottom: 0;  right: 0;  background-image: linear-gradient(to right, #2ab3ff, #ff2d00);  border-radius: 30px;  z-index: -1;}
.cta-btn::after {  opacity: 0;  background-image: linear-gradient(to right,#FF2A67,#FF5D3A);  transition: opacity.3s ease-in-out;}
/* On hover, transtiion the shadow of the anchor, and fade in the after element to show the new background. */.cta-btn:hover {  box-shadow: 4px 5px 27px 4px rgba(255,45,45,0.85);}.cta-btn:hover::after {  opacity: 1;}

<a href="#" class="cta-btn">click me</a>

Use CSS3 transitions with gradient backgrounds

Gradients don't support transitions yet (although the current spec says they should support like gradient to like gradient transitions via interpolation.).

If you want a fade-in effect with a background gradient, you have to set an opacity on a container element and 'transition` the opacity.

(There have been some browser releases that supported transitions on gradients (e.g IE10. I tested gradient transitions in 2016 in IE and they seemed to work at the time, but my test code no longer works.)

Update: October 2018
Gradient transitions with un-prefixed new syntax [e.g. radial-gradient(...)] now confirmed to work (again?) on Microsoft Edge 17.17134. I don't know when this was added. Still not working on latest Firefox & Chrome / Windows 10.

Update: December 2021
This is now possible in recent Chromium based browsers using the @property workaround (but is not working in Firefox). Please see (and upvote) @mahozad's answer below (or above YMMV).

Make gradient background button with hover effect in css

Here is an idea using mask based on this previous answer:

.button {  display:inline-block;  margin:10px;  padding:5px;  font-size:25px;  width:250px;  text-align:center;  line-height:1.8;  background:linear-gradient(to right,red,blue) 0 0/0 0;  color:#fff;  border-radius:50px;  position:relative;  z-index:0;  transition:1s all;}.button:before,.button:after{  content:"";  position:absolute;  z-index:-1;  top:0;  left:0;  right:0;  bottom:0;  background-image:inherit;  border-radius:inherit;  transition:1s all;}.button:before {  -webkit-mask:    linear-gradient(#fff,#fff) top   /100% 5px no-repeat,    linear-gradient(#fff,#fff) bottom/100% 5px no-repeat,    radial-gradient(farthest-side at left,transparent calc(100% - 6px), #fff calc(100% - 5px)) right/27px 100% no-repeat,    radial-gradient(farthest-side at right,transparent calc(100% - 6px), #fff calc(100% - 5px)) left/27px 100% no-repeat;  mask:    linear-gradient(#fff,#fff) top   /100% 5px no-repeat,    linear-gradient(#fff,#fff) bottom/100% 5px no-repeat,    radial-gradient(farthest-side at left,transparent calc(100% - 6px), #fff calc(100% - 5px)) right/27px 100% no-repeat,    radial-gradient(farthest-side at right,transparent calc(100% - 6px), #fff calc(100% - 5px)) left/27px 100% no-repeat;}
.button:hover::after {  opacity:0;}.button:hover {  color:red;}
body {  background:linear-gradient(to right,gray,white)}

<div class="button"> some text</div>

How to get button animation with gradient slide in and out on hover in CSS

You can simplify your code like this:

.btn-main {  color: #000;  border-left: solid 1px #000;  padding: 8px 12px;  font-weight: 700;  text-decoration: none;  background-size: 0% 100%;  background-image: linear-gradient(black, black);  background-repeat: no-repeat;  transition: all 0.5s linear;  color: #000;}
.btn-main:hover {  background-size: 100% 100%;  color: #ececec;  transition: all 0.5s cubic-bezier(0.000, 0.000, 0.230, 1);}

<a class="btn-main" href="#">Przejdź do sklepu </a>

How to change DIV `background linear-gradient` on hover with fade effect using CSS only?

For this, you can use transition but transition does not work for linear-gradient so I'm changing here opacity of ::after pseudo element. button name will not show that why i used z-index for stack order.

#div-text {    display: flex;    flex-direction: row;    width: 80%;    height: 80%;    border-radius: 20px;    background: #2d2e31;    position: relative;    z-index: 1;    overflow: hidden;  }    #div-text::after {    content: "";    position: absolute;    left: 0;    top: 0;    width: 100%;    height: 100%;    transition: opacity 1s ease;    background: linear-gradient(45deg, #36D8FF, #00acee, #66757f);    opacity: 0;  }
  .cl-button {    font-family: 'Merienda One', monospace;    order: 2;    align-self: center;    height: 80%;    width: 60%;    border: 0;    background-color: transparent;    color: aliceblue;    font-size: 16px;    margin-left: 10px;    text-align: left;    position: relative;    z-index: 3;  }

    #div-text:hover::after{      opacity: 1;  }

<div id="div-text">  <button id="button-text" class="cl-button">Text Here</button></div>

How to get a border gradient on button to transition on hover without flashing?

move the background to the main element (not the hover state)

.button {
  border-radius: 9999px;
  text-align: center;
  border: 2px solid #000;
  background: 
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(90deg, rgba(151,215,0,1) 0%, rgba(0,169,224,1) 50%, rgba(51,0,114,1) 100%) border-box;
  width: 300px;
  transition: all .5s ease;
  height: 3rem;
  display: table;
  letter-spacing: 0.125rem;
}

.button-text {
  display: table-cell;
  vertical-align: middle;
}

.button:hover {
  border: 2px solid #0000;
}

<a href="#" class="button">
  <div class="button-text">
    Button
  </div>
</a>

---

Related Topics