--- title: "How to Customize Style Buttons" slug: "how-to-customize-style-buttons-1" description: "Customizing button styles in ClickFunnels ensures they align with your brand and improve user engagement. This article covers how to modify button colors, text styles, shadows, borders, and states for a consistent design across funnels." updated: 2025-02-14T12:03:24Z published: 2025-02-14T12:03:24Z canonical: "support.myclickfunnels.com/how-to-customize-style-buttons-1" --- > ## Documentation Index > Fetch the complete documentation index at: https://support.myclickfunnels.com/llms.txt > Use this file to discover all available pages before exploring further. # How to Customize Style Buttons Customizing your **Buttons** in ClickFunnels is a key step to ensure they align with your brand and catch your visitors’ attention. With **Styles**, you can customize your buttons once and reuse them across all your funnels and pages, saving you time and ensuring consistency. Well-designed buttons can improve the user experience, making it easier for visitors to navigate and engage with your funnels. This article will walk you through the process of customizing style buttons in ClickFunnels, helping you create buttons that look great and are consistent throughout your pages. ![Style buttons](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/wkpzteogxwy_y90_8eegxolazwf3e8eghq.png) --- ## Requirements - An active ClickFunnels account --- ## Accessing Style Buttons 1. Click on **Workspace Settings** at the bottom left of your ClickFunnels dashboard. 2. Scroll down the menu on the left and click on the **Styles** tab. 3. Find the style you want to edit and click on the **Customize Design** icon to the right of it. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-QT7J34SJ.png) 4. In the left menu, click on **Buttons** to access and edit the style’s button settings. --- ## Customizing Button Settings 1. There are **Three Styles** available. Select the style you want to customize. On the right side of the window, you can see a **Preview** of all styles in different states. This preview updates in realtime as you make changes. ![styles](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/vva-xlxrolenerhobaytwtpixtwaj8ij6w(1).png) 2. Each button style has three **States**. To customize, simply click on the state you want to modify: - **Default**: The button’s normal appearance. - **Hover**: The appearance when a user hovers over the button. - **Pressed**: The appearance when the button is clicked. ![Button states](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/hqvq-jpv3r6xbjd3h_zxmcrhdc15p55tka.png) 3. To change the **Background**, **Text Color**, and **Sub Text Color**, click on the **Color** box to open the color palette and choose a color using one of these methods: - Move the custom **color slider** and drag the hand icon on the color palette to select your desired color. Use the **transparency slider** to adjust the color’s opacity. - Enter the **HEX** code for a specific color and adjust the **opacity percentage** using the box next to the HEX code. - Alternatively, switch to the **Theme** tab to choose a color that matches your theme. ![Color Palette](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/r26fl05moqnag4ocgbctdvaikhrx0x_hmg(2).png) 4. Next, customize the **Primary Text Style**. Here are all the options you can change: - **Button Font**: Select the font style for the button text. - **Weight**: Adjust the thickness of the font (e.g., bold, regular). - **Font Size**: Set the size of the button text. - **Font Size Mobile**: Set the size of the button text specifically for mobile devices. > [!NOTE] > NOTE > > - You can switch between rem and px units. > - There is a link icon to link Font Size & Font Size Mobile. If linked, the mobile font size will be the same as the regular font size. ![font size](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/j_hs2erpa8qmhk86pnwwdamggkmqv5yllw.png) - **Letter Spacing**: Adjust the space between each letter. - **Line Height**: Set the height of the text lines to control spacing between lines. - **Text Casing**: Choose the casing for the text (e.g., uppercase, lowercase, capitalize). - **Decoration**: Add text decoration such as underline or strikethrough. 5. Toggle on **Primary Text Shadow** to customize the following options: - **Offset-x**: Adjust the horizontal position of the shadow. - **Offset-y**: Adjust the vertical position of the shadow. - **Blur**: Set the blur level to control how soft or sharp the shadow edges will be. - **Color**: Click on the color box to open the color palette and select your desired shadow color. 6. Customize the **Sub Text Style**. Here are the options you can change: - **Margin Top**: Adjust the space above the sub text. - **Button Font**: Select the font style for the button text. - **Weight**: Adjust the thickness of the font (e.g., bold, regular). - **Font Size**: Set the size of the button text. - **Font Size Mobile**: Set the size of the button - **Letter Spacing**: Adjust the space between each letter. - **Line Height**: Set the height of the text lines to control spacing between lines. - **Text Casing**: Choose the casing for the text (e.g., uppercase, lowercase, capitalize). - **Decoration**: Add text decoration such as underline or strikethrough. 7. Turn on the toggle to adjust the **Border** settings: - **Border Style**: Select the border style (e.g., solid, dashed, dotted). - **Color**: Click on the color box to open the color palette and choose your desired color. - **Stroke Size**: Adjust the stroke size using the slider or by entering a pixel number in the box provided. 8. Toggle on **Corner** to adjust: - **All Corners**: Set the radius for all corners using the slider or by entering a pixel value. - **Separate Edges**: Enable or disable separate edges to customize each corner individually. 9. Enable **Shadow** toggle to modify: - **Shadow Style**: Select the shadow style (e.g., Outset). - **X-direction**: Adjust the horizontal position of the shadow. - **Y-direction**: Adjust the vertical position of the shadow. - **Blur**: Set the blur level to control how soft or sharp the shadow edges will be. - **Spread**: Adjust how far the shadow extends from the element. - **Color**: Click on the color box to open the color palette and select your desired shadow color. 10. **(Optional)** If you want to customize additional Button states or styles, repeat the steps above. 11. Click **Update** to save your changes. ## Related - [Getting Started with Styles](/getting-started-with-styles.md) - [How to Customize Style Colors](/how-to-customize-style-colors.md) - [How to Customize Style Fonts](/how-to-customize-style-fonts.md)