I’ve made this simple button with gradient, but how do I make the transition work? I tried using transition: .2s linear, but it isn’t working.
.contact_button {
color: white;
font-size: 20px;
width: 130px;
height: 50px;
border: solid 4px transparent;
border-radius: 80px;
background-image: linear-gradient(black, black), linear-gradient(to right ,#00AEAD, #72CC50);
background-origin: border-box;
background-clip: content-box, border-box;
cursor: pointer;
}
.contact_button:hover {
background-image: linear-gradient(transparent, transparent), linear-gradient(to right ,#00AEAD, #72CC50);
}<button class="contact_button">Contact</button>>Solution :
Do it differently using mix-blend-mode and you can apply a transition to background-color
.contact_button {
color: white;
font-size: 20px;
width: 130px;
height: 50px;
border: solid 4px transparent;
border-radius: 80px;
background:
linear-gradient(to right ,#00AEAD, #72CC50) border-box,
#000 content-box;
background-blend-mode:darken;
cursor: pointer;
transition:0.5s;
}
.contact_button:hover {
background-color:#0000;
}<button class="contact_button">Contact</button>