Question

Button linear-gradient to right via CSS

C
Badge

Hello, is a “linear-gradient” to a button or/and a text via CSS possible?

The following does not work yet - has anyone an idea??

 

<style>
.lp-pom-button {
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>

 

also to .lp-pom-text

5 replies

Oliver_Lord
Rank
Userlevel 4
Badge

Hi @christian.adminIQ,

 

Thanks for posting here in the Unbounce Community!

 

The following CSS should be the correct one:

 

<style>
  .lp-pom-button {
    background: linear-gradient(to right, red , orange, yellow, green, blue, indigo, violet) !important;
  }
</style>

 

As you can see here on my test page, the rainbow colours are rendering correctly.

 

Let me know if you need any more help 😀

C
Badge

hello @Oliver_Lord u are the best, it works!!!!!!

 

so, i also want to set this gradient to a text color like this, that means only the text should have this gradient:

<style>
  .text_gradient {
      background: linear-gradient(to right, red , orange, yellow, green, blue, indigo, violet) !important;
      background-clip: text;
      color: transparent;
}
</style>

 

can you help again please?

Oliver_Lord
Rank
Userlevel 4
Badge

Hi @christian.adminIQ,

 

You’re almost there - just a couple of extra bits:

<style>
  #lp-pom-text-16 {
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
</style>

 

Here it is in action. You just need to swap out the element ID (i.e. lp-pom-text-16) for your own text element ID.

K

Hello, is a “linear-gradient” to a button or/and a text via CSS possible?

The following does not work yet - has anyone an idea??

 

<style>
.lp-pom-button {
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>

 

also to .lp-pom-text

Hello, is a “linear-gradient” to a button or/and a text via CSS possible?

The following does not work yet - has anyone an idea??

 

<style>
.lp-pom-button {
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>

 

also to .lp-pom-text

To create a button with a linear gradient that transitions from one color to another from left to right using CSS, you can use the background property with the linear-gradient function. Here’s an example:

 

Explanation:

  • .gradient-button: This class styles the button.

    • padding: Adds space inside the button.
    • font-size: Sets the font size.
    • color: Sets the text color to white.
    • border: Removes the default border.
    • border-radius: Rounds the corners of the button.
    • cursor: Changes the cursor to a pointer when hovering over the button.
    • background: Uses linear-gradient to create a gradient from #ff7e5f to #feb47b from left to right.
    • transition: Adds a smooth transition effect for the background when hovering.

  • .gradient-button:hover: This changes the background gradient direction when the button is hovered over, creating a nice effect.

Feel free to customize the colors and other styles as needed.

Md_Mahinur_Khan
Userlevel 4
Badge +1

Hi @christian.adminIQ , have you been able to fix that? If not, I can take a look for you.

Mahin K. 🚀 boost conversions by 👉 https://www.grooic.com

Reply


Terms & ConditionsCookie settings