The Button block allows you to add clickable call-to-action buttons to your SeedProd pages. This block helps you guide visitors to take specific actions, whether that’s making a purchase, signing up for a newsletter, downloading a resource, or navigating to another page.
Buttons are essential elements for conversions and user engagement. With customizable text, links, styles, icons, and visual effects, you can create buttons that stand out and encourage visitors to take action. The Button block supports both internal links (to other pages on your site) and external links (to other websites), as well as anchor links for smooth scrolling to specific sections on the same page.
Adding the Button Block to Your Pages
Follow these steps to add a Button block to your SeedProd page:
Step 1: Add the Block
Under Design > Blocks, drag and drop the Button block into the desired section of your page.
The Button block appears in the Blocks panel and can be dragged into any section or column on your page.
Step 2: Configure Content Settings
Once added, click on the Button block to open its settings. In the Content tab, you can customize the button’s text, link destination, and appearance.
Button:
- Button Text: Enter the main text that appears on your button (e.g., “Get Started”, “Buy Now”, “Learn More”). Keep it action-oriented and concise
- Button Sub Text: Add optional smaller text that appears below the main button text. This is useful for adding supplementary information like pricing, time-limited offers, or additional context
- Link: Enter the URL where the button should take visitors when clicked. This can be a full URL (https://example.com), a relative path (/about), or an anchor link (#section-name) for same-page navigation
- Align: Set the horizontal alignment of the button within its container (left, center, or right)
- Size: Choose the button size from Small, Medium, Large, X Large, or 2X Large. Larger buttons are more prominent and work well for primary calls-to-action
Icons:
- Before Text Icon: Add an icon that appears to the left of your button text. Click Choose Icon to browse and select from hundreds of available icons
- After Text Icon: Add an icon that appears to the right of your button text. This is commonly used for directional cues like arrows or external link indicators
The Content tab lets you customize button text, links, alignment, size, and add decorative icons.
Step 2a: Choose a Template Style
In the Templates tab, you can select from pre-designed button styles to quickly change the overall appearance of your button.
- Pill Button, Flat Button, Blue Button, Light Green Button, Green Button, Orange Button, Red Button, Yellow Button, White Button, Grey Button, Black Button: Choose from eleven different template designs, each with unique colors and styling. Preview each style to find the one that best matches your page design and brand colors
The Templates tab provides eleven pre-designed styles to quickly customize your button’s appearance.
Step 3: Customize the Design
In the Advanced tab, you can customize the visual appearance of your Button block:
Styles:
- Typography: Control the font properties for your button text, including font family, size, weight, and style
- Button Style: Choose the visual treatment for your button. Options include Flat (modern flat design), 2D (subtle depth), Vintage (classic look), Ghost (transparent with border), Link (plain text link), or Custom (full manual control)
- Background Color: Set the background color for your button to match your brand or create contrast
- Vertical Padding: Control the top and bottom spacing inside the button, affecting its height
- Horizontal Padding: Control the left and right spacing inside the button, affecting its width
- Border Radius: Adjust the roundness of button corners. Higher values create more rounded buttons, while zero creates sharp corners
- Button Border Width: Set the thickness of the button’s border outline
- Button Border Color: Choose the color for the button’s border
- Text Shadow: Add shadow effects to button text for depth and readability. Choose from None, Hairline, Small, Medium, Large, X Large, 2X Large, or Custom
- Shadow: Apply shadow effects to the entire button for depth. Choose from None, Hairline, Small, Medium, Large, X Large, 2X Large, or Custom
Spacing:
- Margin: Control the outer spacing around your button block (Top, Right, Bottom, Left). This determines how much space appears between the button and surrounding elements
- Padding: Adjust the inner spacing within your button block container (Top, Right, Bottom, Left). This creates breathing room around the button itself
Attributes:
- CSS ID: Displays the auto-generated unique identifier for your button block. This ID is created automatically by SeedProd for custom styling or JavaScript targeting
- Custom Class: Add custom CSS classes to apply specific styles from your theme or custom CSS
- Custom Attributes: Add any HTML attributes to the button wrapper element. Enter each attribute on a new line using the format: attribute-name|value (e.g., data-action|signup)
Device Visibility:
- Hide on Desktop: Hide the button block on desktop screens
- Hide on Tablet: Hide the button block on tablet devices
- Hide on Mobile: Hide the button block on mobile devices
Animation Effects:
- Entrance Animation: Choose from various animation effects that play when the button scrolls into view. Options include Bounce, Fade In, Zoom In, Rotate In, and many more. This draws immediate attention to your call-to-action
The Advanced tab provides extensive styling options including typography, colors, padding, borders, shadows, and animation effects.
Step 4: Save Your Changes
Once you have finished configuring the Button block and customizing its appearance, make sure to save your work.
You’ve successfully added a Button block to your page! This essential block helps you create clear calls-to-action that guide visitors toward your conversion goals. Experiment with different button styles, colors, sizes, and animations to create buttons that stand out and drive the actions you want visitors to take.