WordPress Shortcode and Dynamic CSS

I have a question I would like to ask to the WordPress developers,
Usually when creating a shortcode that need to generate custom css how do you proceed?

For example a simple button shortcode with the following options :

• text
• link
• text color
• background color
• hover text color
• hover background color

The problem is the hover color option, I would like to generate it dynamically directly to a css file without having to put any custom css in the head or inline <style></style>
block in the page.

The shortcode need of course to work when used several time in the same page.

I am thinking about using wp_add_inline_style or wp_filesystem.

The main goal of this question is to create a shortcode with custom css added in a dynamic css file or a way to not add custom css directly in the page but to stil be able to add hover attribute.

If possible I would like to achieve this with only php html and css but if there is no solution I am also thinking to use javascript.

Any advice would be awesome.

Regards

The closest to a reference technique in core would be shortcode.

If you look at the source of implementing gallery_shortcode() function you’ll see that it:

1. Generates instance number (so multiple shortcodes can be distinguished).
2. Outputs dynamic CSS inline into a page source, for each instance.

I wouldn’t consider it particularly neat solution, but it is about as close as it gets within constraints of WP shortcodes architecture.