css classes in shortcode button
I'd like to create some small buttons. With the Button element, I can only create a 1/6-sized button, which is too big for me :-) My idea: I'll use the Button shortcode in Column Text. But that doesn't give me all the options I need. So I created a class (e.g., .button-2 {
padding: 10px 20px;
background-color: #2E3337;
border: 1px solid #5B5B5B;
transition: border-color 0.2s ease;
}
.button-2:hover {
border-color: #0066FF;
}
However, I can’t save this class in the shortcode. If I save the class in the Column Text (Advanced -> Custom -> CSS Classes), the class’s functionality works—but, of course, in the wrong place. I suppose CSS classes aren’t supported in the shortcode?
Comments
Hi,
Instead of using custom classes, you can use global styles.
https://support.muffingroup.com/video-tutorials/design-once-use-everywhere-global-styles-in-bebuilder-explained/
Once assigned, you can use them everywhere on your website.
So if you need a smaller button in the style tab of the button element, you can set a smaller paddings, and in advanced set inline width or custom width.
Best regards