Best way to create shortcode with dynamiss css

Envato Authors CodeCanyon
1

Hello everyone,

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 

 block in the page.

The shortcode need of course to be able to be used several time in the same page.


I am thinking about using  wp_add_inline_style or wp_filesystem.


Any advice would be awesome.


Regards

            


            

              
              
              
            


            

                
                
              


          

          

            

              



              
                  
                  
              2
              
            

            

              
that’s easy , just add parent div around your button class , whole example is like this :


`



click me 

`

now css is like this :


.button_wrapper{background:#ffffff;} a.mybutton{background:#000;} a.mybutton:hover{background:inherit;}


here on hover it will inherit color of button_wrapper which is white :slight_smile:


you can implement this in inline too , idea is just inheritance css from parent .

Cheers !

            


            

              
              
              
            


            

                
                
              


          

          

            

              



              
                  
                  
              3
              
            

            

              
Thanks for your reply,


The problem is how you would generate this css?


The thing I am trying to do is to avoid create any inline css or any 
 block in the page.

If possible would like to add the css dynamically, the idea is of course to also generate a custom class for each button created with the shortcode so the color can be changed by the user.


Regards