Add gradient Buttons to Bubble

Go to Settings / General and make sure the "Expose the option to add an ID attribute to HTML elements" option is checked

This plugin lets you add CSS classes to your Bubble elements

<style>

.btn-grad {

background-image: linear-gradient(to right, #1D2B64 0%, #F8CDDA 50%, #1D2B64 100%) !important;

transition: 0.5s !important;

background-size: 200% auto !important;

}

.btn-grad:hover {

background-position: right center !important;

}

</style>

If you have multiple button styles, you need to use another class name e.g. btn-grad2. Make sure to also adjust the hover pseudo e.g. class btn-grad2:hover

Note: the first and the 3rd color should be the same e.g.:
#1D2B64 0%, #F8CDDA 50%, #1D2B64 100%

Add the following text to the ID attribute of your Button (not the HTML element):

{addClass: "btn-grad"}

Make sure the class name is the same you have used in the class definition in the HTML element in step 4.

Feel free to have a look at my example setup here https://bubble.io/page?type=page&name=buttons&id=bh-examples&tab=tabs-1