Articles on: 6. Content FAQs

How to Create Buttons with Custom Styles for Your StyleCloud Website

Buttons are one of the most important design elements on any website. Whether you are prompting users to "Buy Now," "Learn More," or "Get Started," a well-designed button can significantly boost engagement and conversions. StyleCloud created blocks where buttons have custom styling, therefore when choosing a block with and it has custom styled button, it needed to edit manually, it will not automatically apply website's stylekit.


How to Style the Button


In the block settings panel on the right sidebar, you will find all the customization options:

Make sure in button settings under Button Inherit Styles to choose Outline


Colors

  • Background Color: Choose your brand’s primary color.
  • Text Color: Make sure it contrasts well with the background.
  • Hover Colors: Define how the button looks on hover for interactivity.


Spacing & Sizing

  • Set padding (inside the button) and margin (outside spacing).
  • Adjust width and alignment (left, center, full width).


Borders & Radius

  • Set a border style (solid, dashed, etc.).
  • Adjust border-radius to make buttons rounded or square.


Typography

  • Choose a custom font, size, weight, and letter spacing.





Updated on: 24/09/2025