Transition effect on .td_social_instagram .td-social-box ?

Hi

do you think transition effect is possible on .td_social_instagram .td-social-box ?

I have tried many codes but I can’t find the good one.

I want similar effect than .tds-button3 between background and :hover background

here find my code on .td_social_instagram .td-social-box

<code>.td_social_instagram .td-social-box {
background: linear-gradient(156deg, #ffac4f 30%,#cf5665 80%);
background-color: #fff;
padding: 0px 0px;
border-radius: 4px;
}
.td_social_instagram:hover .td-social-box:hover {
background: #ffac4f!important;
}

thank you

Best regards

• This topic was modified 6 years by gumball44.
• This topic was modified 6 years by gumball44.

The smooth transition effect on button as on .tds-button3, between normal and hover. I don’t want my buttons to shine so fast. I hope you understand my request.

.tds-button3 {
color: #000;
background-color: #fff;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
z-index: 0;
}

.tds-button3:before {
content: '';
background-color: #fff;
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
z-index: -1;
opacity: 0;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}

• This reply was modified 6 years by gumball44.