The Button widget empowers your design with interactive call-to-action elements, allowing you to effortlessly create visually captivating buttons that encourage user engagement. Customize button text, colors, styles, and actions to optimize your website's user experience.

Button Widget
Button Widget

Content tab

Button

Type
Explore a variety of 7 distinctive button styles, encompassing Default, Primary, Secondary, Info, Success, Warning, or Danger, to lay the foundation for your design. Additionally, you can customize the Default, Primary, and Secondary types within the Theme Style of the Theme Builder.
Text
Input the desired text to be displayed on the button.
Link
Specify the URL for the button's hyperlink. Click the icon to open the link in a new window if necessary.
Alignment
Align the button left, center, right, or justify it within its column for optimal placement.
Size
Opt for pre-set button sizes, ranging from Extra Small to Extra Large, to tailor the button's visual appearance.
Icon
Select an icon from the Icon Library or select an SVG to accompany the button's text, enhancing its visual appeal and significance.
Icon Position
Determine whether the icon should appear before or after the button's text, ensuring versatile visual arrangement.
Icon Spacing
Control the gap between the icon and the button's text, achieving optimal alignment and spacing for a polished appearance.
Button ID
Assign a unique CSS ID to the button, facilitating personalized styling or interaction.

Style Tab

Button

Typography
Modify the default typography settings for the button's text to align with your design preferences.
Text Shadow
Enhance the button's visual depth by adding a shadow and blur effect to the text.
Text Color (Normal & Hover)
Tailor the color of the button's text for both Normal and Hover states to harmonize with your design palette.
Background Color (Normal & Hover)
Select the background color of the button for both Normal and Hover states, offering the option of solid or gradient colors.
Hover Animation (Only on Hover)
Navigate to the Hover tab to assign an animation that activates when the button is hovered over.
Border Type
Choose from a range of border types to encircle the button.
Width (Border is applied)
Control the thickness of the border surrounding the button.
Color (Border is applied)
Customize the color of the border to align with your design scheme.
Border Radius
Fine-tune the corner roundness by setting the border radius, ensuring a visually balanced appearance.
Box Shadow
Configure options to apply a box shadow effect to the button, augmenting its depth and visual appeal.
Padding
Adjust the padding settings of the button to influence its spacing and overall dimensions within the design.

Advanced tab

Layout

Margin
Tailor the margin to control the external space surrounding the widget, determining its separation from adjacent elements.
Padding
Define the padding within the widget to manage internal spacing, influencing the arrangement and appearance of its content.
Width
Choose from options like full, inline, custom, or calculate to specify the widget's width behavior within the layout.
Vertical align (Full width, Inline, Custom, or Calculate options)
Position the button's content, choosing from options such as start, center, end, or stretch to achieve the desired vertical alignment within its container.
Custom width (Custom option)
Specify the widget's width by using a slider to increase or decrease the width in pixels, percentage, or viewport width. You can also manually enter the specific value you want for the width.
Calc (Calculate option)
The calc() CSS function enables the precise calculation of values within stylesheets, allowing dynamic adjustments based on various mathematical expressions for enhanced design flexibility.
Min width (Calculate option)
Establish a minimum width constraint for the widget, ensuring it retains a specified width even when content is limited, contributing to a consistent and structured layout.
Order
Set the order as start, end, or custom to dictate the widget's positioning within its container, enhancing its visual hierarchy.
Size (Full width, Inline, Custom, or Calculate options)
Set the size to none, grow, or custom to set the widget's size within its container,.
Position
Select between absolute or fixed positioning to determine how the widget is placed within the layout, affecting its relationship with other elements.
Z-index
Adjust the Z-index value to establish the stacking order of the widget in relation to other elements, ensuring controlled layering.
CSS ID
Assign a distinctive CSS ID to the widget for targeted styling or interaction through custom CSS or scripting, allowing for tailored customization.
CSS Classes
Set specialized CSS classes for the widget, enabling custom styling via external stylesheets or scripts, enabling refined design adjustments.

Motion Effects

Scrolling Effects
Incorporate scrolling effects to add dynamic visual transitions as users navigate through the content.
Mouse Effects
Elevate your design with the Mouse Effect feature, incorporating captivating mouse tracking and 3D tilting interactions that respond dynamically to user engagement, adding an irresistible layer of interactivity to your content.
Sticky Effects
Utilize sticky effects to maintain specific elements in view as the user scrolls, enhancing user experience.
Entrance Animation
Apply entrance animations to elements within the section for engaging and captivating presentations.

Transform (Normal & Hover)

Opacity
Control the transparency of elements, allowing for captivating fade-in and fade-out effects.
Rotate
Apply dynamic three-dimensional rotation to elements, creating an immersive visual experience.
Offset (X and Y)
Adjust horizontal and vertical positioning for precise element placement and animation.
Scale
Fine-tune the size of elements, enabling smooth size transitions for engaging effects.
Skew (X and Y)
Introduce slanted or distorted perspectives to elements, adding a unique touch to your design.
Transition Duration and Delay (ms)
Tailor the speed of transformations and introduce delays for fluid and controlled animations.
Flip Horizontal/Vertical
Facilitates the transformation of an element's visual orientation, either horizontally or vertically, effectively creating a mirrored reflection of the element's appearance.

Background (Normal & Hover)

Background type
Select from None, Classic or Gradient for the section's background type. Feel free to incorporate each option's specific features to enhance the background dynamics.

Border (Normal & Hover)

Border type
Define the style of the element's border, allowing for versatile design variations.
Border radius
Control the curvature of element corners with precision, enhancing visual appeal and softening edges.
Box shadow
Enhance elements with subtle or dramatic shadow effects, adding depth and dimension to your design.
Border width
Set the thickness of the border surrounding the button element.
Border color
Specify the color of the border, influencing its appearance and integrating seamlessly with the overall design.

Visibility

Scheduled Visibility
Schedule the section's visibility to appear or disappear at specific times, optimizing content display.
Customer Group Visibility
Tailor the section's visibility based on different customer groups, providing personalized experiences.

Responsive

Reverse Columns
Reorder columns to adapt the layout for mobile or alternative arrangements.
Device-specific Hiding
Toggle section visibility for distinct devices such as mobile, tablet, and desktop.

Custom CSS

Custom CSS
Inject your own custom CSS code to implement precise styling adjustments, allowing for a tailored design approach.

© WebshopWorks - Professional PrestaShop Addons