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

How-To's

Design How-To's

How to style individual buttons (by button key) in Options Selectors

Customizing styles for buttons in a common options selector may be necessary, such as to achieve varied text and box shadow color as seen in the image below.

PreviousHow to style a specific component element (E.g. buttons image)NextHow to style a rounded bullet-like checkbox for options buttons

Last updated 2 years ago

Selecting the component to style:

In the “Edit” sub-menu open the “Designer” card.
Select the "Options buttons" component you want to style on your page.

Setting the Designer card to style a specific button:

Click “+ Sub-Element”.
In the “Elements” selector, select “Button”.
Click “+ By Button”.
In the “By Key” selector choose the key that belongs to the button you want to style.

That’s it, you now know how to give a different style to each button! 👍

Related Docs:

⭕

Cover

How to style a rounded bullet-like checkbox for options buttons

Cover

How to style a specific component element (E.g. buttons image)