I’ve created a couple button styles under Global Styles > Elements > Buttons, but… how do you actually apply them to a button?
I don’t see a globe icon anywhere like I do with typography styles.
Is it missing or am I missing it?
This is the global styles panel.
Just like the paragraph style tab, it applies to buttons globally. Do you have buttons (tag) on your page? If so, the styles you create here will apply to them, whether made in Cwicly or not.
Also, the class is to target more specifically.
The same goes for all the other elements.
For me same trouble. After creating global button styles are not applied to any newly added buttons to template. In frontend global button class name have empty styles.
Same here. Global Button styles are not applied.
Hi there @AI_Vegas,
As you may notice, the button block in your example has a <div> tag.
Make sure to set it as a link and its tag to <button>.
1 Like
Nope. I’ve seend this now by playing with it. The global cwicly button style is applied to Tablist Buttons.
If i Add a “Cwicly Button” or native Button Block, it is not a ‘button’ HTML Element.
So this is misleading. We are serching global styling for Gutenberg/Cwicly “Buttons” (wich are just links instead).
I agree, it would be more logical than current solution.
Because it is a <button>
But this would rather fall under Global Classes?
We would also have to have a special class added to every Cwicly button, which would rather go against the whole process no?
I’m more than happy to hear your thoughts
Just adding, if you want to style links in this manner, then the Links styling is perfectly suited.
Just to add to this @AI_Vegas.
I notice you set btn-main as the Class for the block.
This is fine if you don’t make any particular changes to the block, but otherwise I would recommend adding this to the Additional Class instead so that the properties you apply to that particular block aren’t applied to all btn-main.
Right. I think for now the definition of “Button” is the problem here.
I am not sure if it goes against the process. If you think so, then maybe the global Option should be renamed to “HTML Button” or something to prevent confusion.
Honestly i am not sure if we need a global styling section for button elements if they are not used by Cwickly nor by native Gutenberg. There are many other HTML elements no global styling UI is provided for. So why buttons? Hm. I am unsure about that.
Maybe just add possibility to change tag (div / a / button) for this element?
And it would be nice if we had an inner wrapper for the text of a Cwicly Button. This would make more complex stylings possible like animated backgrounds on hover (with :before and :after).
I had to build my buttons out of div block (tag changed to ‘button’) with an inner div in the current project instead of using the button block.
The Button Block uses the same Icon as the Global Button Styling which makes the matter even more misleading:
Hi @michelyweb,
Indeed, your points are right, and this can be confusing.
We’ll be changing this in the next update.
Thanks.
Following this thread, I think that applying a tag of button automatically to the button element when added to the page would make more sense. That way any global button style created is applied automatically and then if you need to be more specific then just add the additional class name from the global button.
1 Like
I’ll add to this list that buttons certainly stand out as a scenario where unified theming capabilities between Cwicly and other Wordpress blocks (certainly native buttons at least) would be really handy. Also, there’s no way currently to set an icon on a global class, even though that’s a theming feature of Cwicly buttons, so rather than renaming the “Buttons” global styling to “HTML Buttons”, please do consider consolidating all these needs/requests into a revamped button theming global styling control that handles all of these scenarios.
2 Likes