The Button Styles section in Flexi Post Grid (under the Style tab) allows you to fully customize the appearance and behavior of buttons in your grid layout. Whether it’s a “Read More” link or a call-to-action button, you have complete control over its layout, spacing, color, typography, and hover effects — all without writing a single line of CSS.

Flexi Post Grid separates button customization into two tabs:

• Normal: The default look of the button.
• Hover: The styling applied when a user hovers over the button.

Normal Tab Options #

Setting	Description
Button Inner Text Alignment	Aligns the text inside the button (left, center, right).
Button Text Alignment	Aligns the overall button element within its container.
Button Width / Height	Set custom width and height in px, %, or em.
Button Position Type	Position button using default, absolute, relative, etc.
Button Margin	Add spacing around the button (top, right, bottom, left).
Auto Margin (Top/Right/Bottom/Left)	Enable auto margins for flexible button positioning.
Button Z-Index	Controls the stack order. Useful when buttons overlap other elements.
Button Background	Choose a background color or gradient.
Button Padding	Set internal padding inside the button.
Button Text Color	Set font color for the button.
Typography	Control font size, weight, letter spacing, and font family.
Text Shadow	Add subtle or bold shadow effects to button text.
Border Type	Choose border style (None, Solid, Dotted, Dashed, etc.).
Box Shadow	Apply shadow to the button for depth.
Button Border Radius	Set rounded corners on individual or all sides.
Button Spacing	Adjust space between the button and surrounding content.

Hover Tab Options #

Setting	Description
Button Width	Optionally change button width on hover.
Button Margin	Control spacing around the button on hover.
Auto Margin (All Sides)	Enable auto spacing during hover.
Button Z-Index	Adjust layer stacking on hover.
Button Padding	Adjust inner space on hover.
Hover Text Color	Set text color when hovered.
Hover Background Color	Define a different background color on hover.
Hover Animation	Add interactive animations like bounce, fade, slide, etc.
Text Shadow	Shadow effect when hovered.
Border Type	Choose border style on hover.
Box Shadow	Apply a different shadow on hover.
Button Border Radius	Rounded corners on hover.

How to Use Button Styles #

1. Go to the Style Tab of your Flexi Post Grid layout.
2. Open the Button Styles accordion section.
3. Use the Normal tab to define default styles.
4. Switch to the Hover tab to customize mouse-over behavior.
5. Adjust sliders, pick colors, or enter values for precise control.
6. Preview the changes instantly in your live editor.
7. Save and publish to apply changes site-wide.