Applying color via CSS (and gradients?)

[danielthedifficult]

Hello Colin, and thank you so much for this beautiful product!

I am trying to style the button via css, but I can't seem to get it to work. It defaults to green (per line 244 of the .js file).

I've tried:

applause-button { color: red; }

applause-button { color: red !important; }

applause-button .style-root { color: red; }

I apologize if this is something really simple I should be able to figure out from your examples and sample code, but it's not clear to me how to apply it.

My 'real' goal would be to be able to apply a linear gradient effect, and animate it so the button pulses during a moment where we are 'introducing' the feature to the users.

Thank you for any help you can provide regarding changing the color via CSS and/or applying a gradient.

[danielthedifficult]

Update:

applause-button .style-root { color: red !important; }
does seem to work - but this is not ideal... if I want to change this later by adding another CSS class, it breaks...

[chriswilty]

The standard way of setting color is via the color attribute:

<applause-button color="purple"></applause-button>

From release 4.0.0 you will additionally be able to set CSS property --main-color, though this should only be necessary if you don't have programmatic access to the component.

Note that CSS gradients can only be used where an image would otherwise be specified, which is why they work for backgrounds but not e.g. border color.

Additionally, be wary of using animations and/or colour changes to "introduce" a feature, as then you may be excluding people with visual impairments. The component has better accessibility from release 4.0.0.