Welcome
Guides
How-To's
Other useful docs
- Useful Docs
- WORK IN PROGRESS
  - ◻️Pending
    Work in Progress: How the New Rendering Engine Works
    Work in Progress: How to create a new Split test
    Work in Progress: Preloading images
    Work in Progress: How to show “loading…” while fetching or processing data
    Work in Progress: How to send data to Tiktok
    Work in Progress: How to send data to Postcript
    Work in Progress: How to send data to Klaviyo
    Work in Progress: How to send data to Google Tag
    Work in Progress: How to send data to Google Analytics
    Work in Progress: How to Fetch User Location Data to use in your Flow
    Work in Progress: How to fetch job offers from Lever’s API
    Work in Progress: How to fetch data and display the results as options in a dropdown
    Work in Progress: How to create a new split test with 3 variants
    Work in Progress: How to Duplicate a Container with All its Content
    Work in Progress: How to add Chart.js to your flow
    Work in Progress: How to Create Repeatable Button Components, Fetching from a Database
    Work in Progress: How to Create a Global Column
    Work in Progress: How to Clone a Flow
    Work in Progress: How to Create and Style a Carousel
    Work in Progress: How to Add Default User Data
    Work in Progress: How to Show Validation Messages on Required Fields
    Work in Progress: How to create an Option Selector Results Page
    Work in Progress: How to create a combined Option Selector + Input component
    Work in Progress: How to Add an Info Box Popup
    Work in Progress: How to set up a Micro-Product as a Popup on your Site
    Work in Progress: How to make a Full-Page Flow
    Work in Progress: How to Use Custom Selectors
    Work in Progress: How to Add a Video/GIF Placeholder to a Video Component
    Work in Progress: How to Style Buttons
    Work in Progress: How to Center Components
    Work in Progress: How to Bring Data from Airtable
    Work in Progress: How to add a custom font from a website:
    Work in Progress: How to Create Computed Fields
    Work in Progress: How to Ping an API
    Work in Progress: How to Store a Password
    Work in Progress: How to Bring Data from Google Sheet
    Work in Progress: How to Fetch Safely from Savvy
    Work in Progress: How To Fetch Data from a specific row in Airtable in a Computed Field

Powered by GitBook

On this page

Step 1: Choose the Element you Want to Style
Step 2: Style it!
Step 3: Style some States

Other useful docs

WORK IN PROGRESS

Pending

Work in Progress: How to Style Buttons

PreviousWork in Progress: How to Add a Video/GIF Placeholder to a Video Component NextWork in Progress: How to Center Components

Last updated 1 year ago

Some components are built by several parts. A Button component is one of those, so to achieve the style you want, you'll have to edit them separately.

Step 1: Choose the Element you Want to Style

Select the button to be styled
Give it a tag if it doesn't have one (On the Right Side Bar, Options Tab)
Open the Design Tab on the Right Side Bar
In the "Choose an element" area you'll see the different element options. In Button components we have 4 options:
The next area on the tab is "Apply these styles to". Select which components you want to affect with these new styles.

Step 2: Style it!

Further down on the design tab there's the "Now set your styles" area. There you'll find the most commonly used styles, and if there's one you can't find, you can always enter it as a custom style at the bottom of the list (the custom styles won't be reflected until you press enter. You can change it later)
Have fun! You can find some recommendations in the following section:

Step 3: Style some States

Below the "Choose an Element" area, there's a toggle that says "Use states". When you switch that, you'll get a few more options to play around with:
Select the State you want and go back to step 2!

◻️

🔘How to style hover, selected, disabled button states