Browser: Chrome 139.0.7258.128
OS: Windows 10
URL: Link to a page that illustrates this issue
Video: https://youtu.be/ZFLuAu-rgEw
The button background in the component stops working.
Hi @Mover,
Thank you for reaching out to us and for the video. However, I could not replicate the issue on my end. Can you tell me how you created the black background on hover, so I can replicate it?
Ps. While I can understand a little bit of your language, as it’s somehow similar to ours, it’s advisable to record them in English for better understanding. 
Thank you,
Matej
The background on hover doesn’t matter. The problem is in the background in the normal state.
Hi @Mover,
I also can’t replicate the issue with that. Can you copy-paste the structure here (before it’s converted to the component), so I can see if I can replicate it?
If not, I’ll need a login access. I’ll let you know.
Thanks,
Matej
{"content":[{"id":"onjjkv","name":"section","parent":0,"children":["bmhygj"],"settings":{"_padding":{"bottom":"5rem","top":"5rem"}}},{"id":"bmhygj","name":"container","parent":"onjjkv","children":["pmcmdu","qpwhpo"],"settings":{"_background":{"color":{"hex":"#3a6e00","id":"knhrip","name":"primary"}},"_direction":"row","_alignItems":"center","_justifyContent":"space-between","_padding":{"bottom":"2rem","top":"2rem","right":"3rem","left":"3rem"},"_direction:mobile_portrait":"column","_border":{"radius":{"top":"var(--radius)","right":"var(--radius)","bottom":"var(--radius)","left":"var(--radius)"}},"_padding:mobile_portrait":{"bottom":"2rem"}}},{"id":"pmcmdu","name":"text-basic","parent":"bmhygj","children":[],"settings":{"text":"Objednejte se na konzultaci","_typography":{"color":{"hex":"#ffffff","id":"ifhqpc","name":"white"},"font-size":"3rem","text-transform":"uppercase","font-weight":"500"},"_typography:mobile_portrait":{"font-size":"2.2rem"}}},{"id":"qpwhpo","name":"button","parent":"bmhygj","children":[],"settings":{"style":"primary","_background":{"color":{"hex":"#ffffff","id":"ifhqpc","name":"white"}},"_typography":{"text-transform":"uppercase","color":{"hex":"#000000","id":"lqjizx","name":"black"}},"text":"Konzultace zdarma","icon":{"library":"themify","icon":"ti-arrow-top-right"},"_cssGlobalClasses":["npvwuk"],"link":{"type":"external","url":"/kontakt/"},"_background:hover":{"color":{"hex":"#000000","id":"lqjizx","name":"black"}},"_typography:hover":{"color":{"hex":"#ffffff","id":"ifhqpc","name":"white"}}}}],"source":"bricksCopiedElements","sourceUrl":"https://dev.inessoft.cz","version":"2.0.2","globalClasses":[{"id":"npvwuk","name":"animate","settings":{"_transform:hover":{"scaleX":"1.1","scaleY":"1.1"},"_cssTransition":".5s"},"modified":1755678097,"user_id":1}],"globalElements":[]}
Hi @Mover,
thank you so much for the JSON structure. I’ve tested it locally, but I was unable to replicate the issue. I guess it has to be something specific to your install, so can you send temporary login credentials to your website and a link to this topic to help@bricksbuilder.io using the email address you used during the purchase, so we can take a look?
Thank you,
Matej
I can’t give access. But I made a page for you demonstrating the problem.
The first section is a regular element. Everything works fine. The button has a white background.
The second section is a component! And there, too, in the settings, the button has a white background! But on the front there is none(
https://dev.inessoft.cz/test/
Hi @Mover,
thank you so much for this setup. I was able to replicate the issue now. The problem is, that the settings in the Theme styles have higher specificity than the settings on the class inside the component (for background color) of the button.
I’ve created an internal task for this.
Thank you,
Matej
1 Like
We fixed this issue in Bricks 2.1 beta, now available as a manual download in your account (see changelog).
Please let us know if you are still experiencing issues.
As with any pre-stable release, please do not use it on a production website. It is intended for testing in a local or staging environment only.
The problem is not resolved. Version 2.3.2