Gradient hover for button

Custom code
1

Hello! Can I customize button hover effect? I want it to be a gradient instead of a plain color. Tried with a custom code, but it didn’t work. Pls, help.

2

hey… here is a pure css solution.
You have to adopt it to your colors, for example using this gradient generator:
https://cssgradient.io/

And you have to paste your Data-ID of your button you can get via devtools > inspect of your browser.

.rmwidget.widget-button .common-button[data-id="64e8734e66c8570013d06ee0"] {
background-color: rgba(255, 0, 0, 0)!important;
  transition: all 800ms ease-in;
  &:after{
    content: '';
    position: absolute;
    left: -200%;
    top: 0px;
    width: 400%;
    height: 100%;
    background: rgb(33,209,159);
    background: linear-gradient(45deg, rgba(33,209,159,1) 0%, rgba(34,44,64,1) 50%, rgba(21,65,153,1) 100%);
    z-index: -1;
    transition: all 800ms ease-in;
  }
  &:hover{
    color: #154199;
  }
  &:hover:after{
    left: 0%;
    top: 0px;
  }
}
1 Like
3

Thanks! That’s the code I’ve found before and tried to reuse. It works fine when I just copy and paste, but once I change colors it doesn’t :smiling_face_with_tear:
This is my gradient: background: rgb(168,202,240);
background: linear-gradient(0deg, rgba(168,202,240,1) 0%, rgba(220,165,238,1) 100%);

Default state color for background rgba(34, 34, 34, 1) with grey borders rgba(238, 238, 238, 1)

I’m pretty bad with coding, so I’m just lost now :sweat_smile:

4

hey, sorry I don´t have the time to adapt it to your specific needs.
But It isn´t that difficult to understand the CSS vlaues. Try to get into it!
Sometimes its also a try to change the colors inside the dev-tools of your browser to check directly if everything looks like you want. After that copy/paste the values from your dev-tools into your css.