Button Styles

Learn how to customize button styles using Refoundry’s Global Settings, including colors, padding, icons, and hover states for consistent design.

Last updated:

Description

In this tutorial, you’ll learn how button styles work and how to customize them using Global Styles so that buttons can be managed and reused consistently across your site.

This tutorial will cover:

  • Adding a button and switching between styles
  • Opening Button Styles in Global settings
  • Creating a new button style
  • Customizing button background and text color
  • Adjusting padding and border radius
  • Changing font size, font family, font weight, and kerning
  • Adding icons to buttons
  • Adjusting icon size, spacing, and placement
  • Customizing hover state styles

Suggested videos:

Button Links

Font Awesome Icons

Button & Link Styles | Refoundry

Button Block | Refoundry

Relate Resources

Keep exploring.

Explore more resources we’ve selected to help you dig deeper into topics that matter to your workflow.

Ready to take the next step?

Put your learning into action.

Whether you’re exploring on your own or want guided support, Refoundry makes it easy to start building smarter today.