I made this example page to illustrate what I am trying to do. The upper section is typical with white text and button, and is working fine. The button is responsive and stops getting smaller on mobile and stops getting bigger on very large screens (although I disabled to debug).
The trouble is on very light images I need to invert it to a black button. I thought I would simply add a class .btn-black and apply it to the white button (which is a redefined x-btn.) It works perfectly in the builder, but does not work once published. I guess I’m not targeting the button properly? This would be the ideal way to handle it as it is most flexible, elegant, and efficient.
Next, I tried using a new X Theme button. I got this to work except for the responsiveness. Also, I don’t believe it would be globally editable in this approach?
Finally, I made a button with HTML in a content area. I did not bother to add the big & small responsiveness, but easily could since styling is class-based. Maybe this is the way to go? I have never used content areas. Is there a better element to hold the CSS if this is the recommended approach?
Any thoughts or hints would be most welcome!