> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fetchski-attract.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Buttons and card styles

> Every button on your site shares one set of options, and every card section shares one set of card looks. Here's how they work.

Learn the button and card options once, and you can style any button or card on your site. Every section uses the same set of options for each.

 **Who can do this:** anyone who can edit the page, for a section's buttons and cards. The header button is in **Site design**, so it's for Editors, Admins and Owners.

## Find a section's button and card options

1. Open the page and choose **Edit** in the edit bar.
2. Select the section, then choose **Edit** (pencil) in its side toolbar. The section editor opens.
3. For buttons, open the **Button** or **Buttons** tab.
4. For cards, look for **Card style** and **Hover effect**. They sit on a different tab in each section.

Your changes show on the page beside the editor as you make them.

## The idea: buttons

**One set of options.** Every button has the same options, whether it's in a Hero, a **Pricing / Packages** card or a form. A Hero is the big opening section at the top of a page; see [Hero](https://docs.fetchski-attract.com/guides/sections/hero.md). A section with one button has a **Button** tab, and a section with two has a **Buttons** tab. The header's button lives in **Site design** → **Header: Button**.

**Two standard looks.** Your site has 2 ready-made button looks, **Primary Default** and **Secondary Default**:

* **Primary Default**: a solid button in your **Primary / brand** color, with your **Text** color for the label.
* **Secondary Default**: the same button as an outline.

These looks aren't the same thing as your **Primary / brand** and **Secondary** palette colors. They're built in, so there's no place to edit the looks themselves for the whole site. To change every button at once, change your palette in [Colors](https://docs.fetchski-attract.com/guides/site-design/colors.md).

Both start with **Slight** corners, **Normal** size, a **Fill sweep** on hover and **Lift + scale** motion. A new button starts on one of the two looks, and you change anything from there.

**Empty button colors.** A button's colors come as a dark and a light theme pair, and a light-theme box left empty uses the dark one. Each color behaves differently when both boxes are empty:

* **Button color**: no color at all. A solid button gets no fill, so it shows as an outline. The thin border always stays, so a button never disappears.
* **Label color**: a solid button uses your **Text** color. The other styles use the **Button color**.
* **Hover color**: uses the button's own color.

This is different from your site colors, where an empty box means the built-in color.

![Parker's two standard buttons side by side, "Book a tour" (Primary, solid) and "See our prices" (Secondary, outline), then the same Primary button mid-hover with the fill sweep.](https://mintcdn.com/fetchski-attract-api/-xGXn_krfc_rfFbR/images/cms/guides/site-design/buttons-and-card-styles/guides-site-design-buttons-two-looks-light.png?fit=max\&auto=format\&n=-xGXn_krfc_rfFbR\&q=85\&s=f71d24589679560f2e1eb3e68bb37ccb)

Your site's Primary and Secondary buttons, and the Primary on hover.

### The options

**What it says and where it goes**

* **Button label**: the text on the button. Leave it empty to hide the button.
* **Button link**: where the button goes. For a page on your site, type its address without the domain, starting with /, such as /contact-us. To find it, open the page on your site and copy the part of the address after your domain. For another website, paste its full web address, starting with https\://.
* **Open in new tab**: opens the link in a new browser tab.

**How it looks**

* **Button style**: **Solid (filled)**, **Outline**, **Soft (tinted fill)** or **Text link**. Solid fills the button with its color. The others use the color for the border and text.
* **Button size**: **Small**, **Normal** or **Large**.
* **Corner radius**: **Pill**, **Rounded**, **Slight** or **Square**.
* **Button color**: the fill of a solid button, or the border and text of the other styles.
* **Label color**: the color of the text and icon.

**On hover**

* **Hover color**: the color the hover effect uses, such as the color that sweeps in or the glow. Empty uses the button's own color.
* **Hover surface**: what appears on the button when a visitor points at it:
  * **None**: no change.
  * **Soft shadow**: a soft shadow appears under the button.
  * **Offset shadow**: a colored shadow appears, set off to one side of the button.
  * **Soft glow**: a colored glow appears around the button.
  * **Fill sweep**: color sweeps across the button and fills it.
  * **Border thicken**: the button's outline gets thicker.
* **Offset / glow color**: the color of the **Offset shadow** or **Soft glow**. Empty uses your **Secondary** color.
* **Hover motion**: **Lift (small slide up)**, **Scale (grow)**, **Lift + scale** or **None**.

**Icon**

* **Icon name** and **Icon family**: add an icon to the button. Find an icon at [fontawesome.com/icons](https://fontawesome.com/icons) and type its name without "fa-", such as arrow-right. Then pick its look in **Icon family**, such as **Classic Regular**.
* **Icon position**: **Before label** or **After label**.
* **Nudge icon on hover**: the icon slides a little toward its side, so an arrow edges outward.

### The live preview

In a section editor you see each change on the page beside it. A few places edit a button away from the page, so they show a **Live preview · Buttons** panel instead:

* **Site design** → **Header: Button**
* the **Page Header** section's **Buttons** tab
* the blog page's **Post · Back button** tab
* the **Service Area Map** section's **Search button** tab

Switch the preview between **Dark** and **Light**, and point at a button to see its hover. Under each button, **Primary Default** and **Secondary Default** reset its look to one of your 2 standard buttons. Your label, link and icon stay as they are.

![Site design on Header: Button, with the Live preview · Buttons panel at the top showing Parker's "Book a visit" header button, the Dark / Light switch, and the "Reset Header CTA to" Primary Default and Secondary Default buttons.](https://mintcdn.com/fetchski-attract-api/P3cu9rF2Qosncc3U/images/cms/guides/site-design/buttons-and-card-styles/guides-site-design-buttons-live-preview-light.png?fit=max\&auto=format\&n=P3cu9rF2Qosncc3U\&q=85\&s=1481ba8130317d21dd78a2014ff26d86)

The live preview, with one-click resets to your standard looks.

## The idea: card styles

Sections that show cards share 2 options for them. Together they decide how a card looks at rest and what it does when a visitor points at it.

**Card style** is the card's resting look. There are up to 12. A few sections leave some out, such as **Team** and **Service Area Map** (see [Good to know](#good-to-know)), and **Instagram Feed** has no **Card style** at all. In **How it works / Steps** the option is called **Step style**.

| Style | Looks like |
| - | - |
| **Raised — lit soft card** | A quiet card that sits slightly above the page |
| **Luxe — frosted glass panel** | A frosted glass panel |
| **Outline — plaque frame** | A framed plaque with a double line |
| **Plain — no chrome** | No card at all, just the content |
| **Poster — accent keyline** | A card framed by a thin line in your **Primary / brand** color |
| **Spine — accent rail** | A colored rail along the top |
| **Tint — accent wash** | A soft wash of your **Primary / brand** color |
| **Ticket — notched edges** | A ticket with notches in its sides |
| **Bracket — corner marks** | Only corner marks, no full frame |
| **Forge — machined plate** | A machined plate with an engraved frame |
| **Press — punched index card** | An index card with punched holes and a margin line |
| **Inlay — recessed panel** | Content set into the page, like a well |

Some styles bring extra options. **Card corners** sets the rounding: **Default**, **Square**, **Slight**, **Rounded** or **Large**. **Card style color** colors the Spine rail, the Bracket marks, the Forge frame and the Press margin line; empty uses your **Primary / brand** color. **Forge color placement** and **Forge line weight** are for Forge only.

**Hover effect** is what the card does when a visitor points at it. **Feature Cards**, **Pricing / Packages** and the blog sections call it **Card hover effect**. The shared choices are:

* **Lift**, **Pop**, **Press**, **Glow** and **Outline**: quick reactions, such as rising or glowing.
* **Sheen**: a soft light sweeps across the card once.
* **Tilt**, **Magnetic** and **Spotlight**: the card follows the visitor's pointer. These need animations turned on in **Site design** → **Motion**.
  * **Tilt** tips the card toward the pointer.
  * **Magnetic** leans the card toward it.
  * **Spotlight** moves a soft light in your **Primary / brand** color across the card with it.

**Feature Cards** and **Pricing / Packages** have their own hover choices, such as **Rise + underglow** and **Checklist cascade** on Pricing.

![The same row of 3 Parker's Feature Cards ("Daycare", "Training", "Puppy socials") in 4 card styles: Raised, Luxe, Forge and Press, stacked.](https://mintcdn.com/fetchski-attract-api/-xGXn_krfc_rfFbR/images/cms/guides/site-design/buttons-and-card-styles/guides-site-design-cards-styles-grid-light.png?fit=max\&auto=format\&n=-xGXn_krfc_rfFbR\&q=85\&s=1ff6a72d826d9951d328669c8e98c473)

One set of cards in four card styles.

![A Parker's Testimonials card mid-hover with Tilt: tipped toward the pointer, with its glare.](https://mintcdn.com/fetchski-attract-api/-xGXn_krfc_rfFbR/images/cms/guides/site-design/buttons-and-card-styles/guides-site-design-cards-tilt-hover-light.png?fit=max\&auto=format\&n=-xGXn_krfc_rfFbR\&q=85\&s=e5e139657a6b4b60cdc0a23fd07475b6)

Tilt: the card follows the visitor's pointer.

### Every section starts different

Each card section starts on its own look, so a new page with several card sections doesn't repeat itself:

| Section | Starts with | On hover |
| - | - | - |
| **Feature Cards** | Poster | Pop |
| **Testimonials** | Spine | Sheen |
| **Team** | Outline | Glow |
| **Google Reviews** | Raised | Lift |
| **Pricing / Packages** | Raised | Rise + underglow |
| **How it works / Steps** | Plain | None |
| **FAQ** | Plain | None |
| **Blog Preview** and the blog page | Raised | Pop |
| **Gallery Preview** and **Gallery (Full)** | Raised | Glow |
| **Service Area Map** | Raised | Outline |

**Instagram Feed** has a **Hover effect** only. It starts on Lift.

## When to choose which

| You want… | Try |
| - | - |
| One clear main action and a quieter second one | **Solid (filled)** for the main button, **Outline** or **Text link** for the second |
| A button that stands out on a colored band | Set its **Button color** to a light color and its **Label color** to your accent |
| A restrained hover | **Hover surface** **Soft shadow** with **Hover motion** **Lift (small slide up)** |
| Cards that blend into a calm page | **Plain — no chrome** or **Raised — lit soft card**, with **Lift** |
| Cards that feel premium | **Luxe — frosted glass panel**, with **Tilt** or **Spotlight** |
| Cards with a graphic edge | **Bracket** or **Forge**, with **Lift** or **Glow**; or **Ticket** or **Press**, with **Magnetic** |

## A short example

Parker's Puppy Playland wants its pricing page to feel special, and its home page to stay calm.

1. On the pricing page, Jordan sets the **Pricing / Packages** section's **Card style** to **Luxe — frosted glass panel**. Jordan sets its **Card hover effect** to **Tilt (3-D — needs motion on)**.
2. On the home page, Jordan sets the **Testimonials** section's **Card style** to **Plain — no chrome** and **Hover effect** to **None**.
3. Jordan opens the **Final CTA**, the call-to-action band that closes a page (see [Final CTA](https://docs.fetchski-attract.com/guides/sections/final-cta.md)). Jordan changes its second button's **Button style** to **Text link**, so "Book a tour" is the clear main action.
4. In **Site design** → **Header: Button**, Jordan sets the label to "Book a tour" and chooses **Primary Default** in the live preview.

Each change affects only the button or section it was made in. The header button is site-wide, so it shows on every page.

## Good to know

* **Some styles and hovers don't mix.** **Bracket**, **Forge** and **Press** don't combine with **Sheen**, **Spotlight** or **Tilt**: the hover's light replaces the style's marks. Pick another hover for those styles.
* **Ticket and Press hide shadows.** Their cut-out edges also cut off shadow-based hovers such as **Lift**'s deeper shadow and **Glow**'s halo. Pair them with **Magnetic**, or with **Tilt** on **Ticket**.
* **A few sections leave out styles.** **Team** has no **Forge** or **Press**, because they would draw over people's photos. **Service Area Map** has no **Ticket**, **Bracket**, **Forge** or **Press**.
* **Label colors don't adjust themselves.** A cleared **Label color** on a solid button uses your **Text** color, whatever the fill. Check that the label stays easy to read on its button, in both themes.
* **Hover motion respects visitors.** Visitors who ask their device for less motion see buttons and cards hold still, with no sliding, growing or tilting.
* **The reset copies, it doesn't link.** **Primary Default** copies the standard look onto that button once. Change the button afterward, and it keeps your change.
* **Final CTA starts in reverse colors.** Its buttons start in reverse colors, so they stand out on its colored band. They're ordinary button colors, so you can change or clear them.

## Related

> [card] [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md)
>
> buttons, cards, backgrounds and fonts in every section.

> [card] [Header](https://docs.fetchski-attract.com/guides/site-design/header.md)
>
> the header button and the rest of the header.

> [card] [Colors](https://docs.fetchski-attract.com/guides/site-design/colors.md)
>
> the palette your buttons and cards start from.

> [card] [Motion](https://docs.fetchski-attract.com/guides/site-design/motion.md)
>
> turn on the animations Tilt, Magnetic and Spotlight need.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.