# Gradient hover for button

**URL:** <https://forum.readymag.com/t/gradient-hover-for-button/1901>\
**Category:** Custom code\
**Created:** [August 24, 2023, 2:39pm UTC](https://forum.readymag.com/t/gradient-hover-for-button/1901 "2023-08-24T14:39:31Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Julia\_N](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/julia_n/32/1315_2.png) [@Julia\_N](https://forum.readymag.com/u/Julia_N)\
**Post date:** [August 24, 2023, 2:39pm UTC](https://forum.readymag.com/t/gradient-hover-for-button/1901/1 "2023-08-24T14:39:31Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [August 25, 2023, 9:33am UTC](https://forum.readymag.com/t/gradient-hover-for-button/1901/2 "2023-08-25T09:33:22Z")

</div>

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

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

```auto
.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;
  }
}

```

---

<div class="post-metadata">

**Author:** ![Julia\_N](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/julia_n/32/1315_2.png) [@Julia\_N](https://forum.readymag.com/u/Julia_N)\
**Post date:** [August 28, 2023, 3:44pm UTC](https://forum.readymag.com/t/gradient-hover-for-button/1901/3 "2023-08-28T15:44:19Z")

</div>

> [@neueMeta](#):
>
> ```auto
> 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;
> }
> }
> 
> ```

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 🥲  
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 😅

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [August 30, 2023, 8:09am UTC](https://forum.readymag.com/t/gradient-hover-for-button/1901/4 "2023-08-30T08:09:38Z")

</div>

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.