--- title: Buttons Style description: On this page, edit the settings for the global and primary buttons across your entire website. Global Button Primary Button Primary Button “Hover” State… --- [Skip to content](https://help.punchmark.com/knowledgebase/wiki/spaces/punchmark/pages/86671451#main-content) English Show submenu for translations [![punchmark-logo-horizontal-white](https://help.punchmark.com/hs-fs/hubfs/Punchmark%20Branding/punchmark-logo-horizontal-white.png?width=225&height=38&name=punchmark-logo-horizontal-white.png)](https://academy.punchmark.com/knowledge?hsLang=en) - [Website](https://www.punchmark.com/) - [News](https://www.punchmark.com/news) - [Support](https://www.punchmark.com/contact-support) - [In the Loupe](https://www.punchmark.com/loupe) Open main navigation Close main navigation - [Website](https://www.punchmark.com/) - [News](https://www.punchmark.com/news) - [Support](https://www.punchmark.com/contact-support) - [In the Loupe](https://www.punchmark.com/loupe) - English Show submenu for translations - Go to punchmark.com Go to punchmark.com Hello. How can we help you? - There are no suggestions because the search field is empty. 1. [Punchmark Knowledge Base](https://help.punchmark.com/knowledgebase?hsLang=en) 2. [hidden WIP](https://help.punchmark.com/knowledgebase/hidden-wip?hsLang=en) 3. [Design](https://help.punchmark.com/knowledgebase/hidden-wip?hsLang=en#design) # Buttons Style On this page, edit the settings for the global and primary buttons across your entire website. - [Global Button](https://help.punchmark.com/knowledgebase/wiki/spaces/punchmark/pages/86671451#ButtonsStyle-GlobalButton) - [Primary Button](https://help.punchmark.com/knowledgebase/wiki/spaces/punchmark/pages/86671451#ButtonsStyle-PrimaryButton) - [Primary Button “Hover” State](https://help.punchmark.com/knowledgebase/wiki/spaces/punchmark/pages/86671451#ButtonsStyle-PrimaryButton“Hover”State) - [Primary Button “Focus” State](https://help.punchmark.com/knowledgebase/wiki/spaces/punchmark/pages/86671451#ButtonsStyle-PrimaryButton“Focus”State) Remember to click the **Save** button to commit your changes. Click the **Reset** button to return to the default settings. ## Global Button This is the universal styling for all of your tags. ### Global Button Font - **Font Family** — Enter/choose the font family for this button. - **Classification** — Choose whether you want serifs on the fonts or not (san serif). ### Global Button Styling Click the small **+** button to expand this section. There are five button sizes that are available: **XS, SM, MD, LG**, and **XLG**. If you prefer, modify the settings for each of thew button sizes that you intend to use. - Choose a **Button Style**. - Use the **-** and **+** buttons to adjust the **Kerning**, **Font Size, Font Weight, Button Height,** **Horizontal Padding**, **Border Radius**, and **Icon Sizing**. - Also, choose the **Style** and type of **Shadow**. ![](https://help.punchmark.com/hubfs/knowledge-base/confluence-migration-2026/86540399-0cfab517cb.png) ## Primary Button This is the styling for your tags. ### Primary Button Background **Background type**: Select the drop-down and choose a light, dark, or other type of background. **Background color**: Select the drop-down and then use the color picker to choose a specific background color. You can also enter the hex color code into this field. ### Primary Button Border - **Border Width**: Use the **-** and **+** buttons to adjust the width of the button border. - **Border Color**: Select the drop-down and then use the color picker to choose a specific color for border. You can also enter the hex color code into this field. - **Border Placement**: Choose the placement of the border. ### Primary Button Text Style - **Text Color**: Select the drop-down and then use the color picker to choose a specific text color. You can also enter the hex color code into the **Text Color** field. - **Text Shadow**: Select the drop-down to choose what type of text shadow to apply to the button text. - **Drop Shadow**: Select the drop-down to choose what type of drop shadow to apply to the button text. ![](https://help.punchmark.com/hubfs/knowledge-base/confluence-migration-2026/86507609-3b0196f710.png) ## Primary Button “Hover” State This is the styling for your tag when its button is in a hover state. ### Button Hover Background **Background type**: Select the drop-down and choose a light, dark, or other type of background. **Background color**: Select the drop-down and then use the color picker to choose a specific color for the background. You can also enter the hex color code into this field. ### Button Hover Border - **Border Width**: Use the **-** and **+** buttons to adjust the width of the button border. - **Border Color**: Select the drop-down and then use the color picker to choose a specific color for the border. You can also enter the hex color code into this field. - **Border Placement**: Choose the placement of the button border. ### Button Hover Text Style - **Text Color**: Select the drop-down and then use the color picker to choose a specific text color. You can also enter the hex color code into the **Text Color** field. - **Text Shadow**: Select the drop-down to choose what type of text shadow to apply to the button text. - **Drop Shadow**: Select the drop-down to choose what type of drop shadow to apply to the button text. ![](https://help.punchmark.com/hubfs/knowledge-base/confluence-migration-2026/86638747-6ec922ce57.png) ## Primary Button “Focus” State This is the styling for any tag when its button is in a focus state. This is what the button will look like once it’s clicked and becomes the “active” item on the page. ### Button Focus Background **Background type**: Select the drop-down and choose a light, dark, or other type of background. **Background color:** Select the drop-down and then use the color picker to choose a specific background color. You can also enter the hex color code into this field. ### Button Focus Border - **Border Width**: Use the **-** and **+** buttons to adjust the width of the button border. - **Border Color**: Select the drop-down and then use the color picker to choose a specific border color. You can also enter the hex color code into the **Background Color** field. - **Border Placement**: Choose the placement of the button border. ### Button Focus Text Style - **Text Color**: Select the drop-down and then use the color picker to choose a specific text color. You can also enter the hex color code into the **Text Color** field. - **Text Shadow**: Select the drop-down to choose what type of text shadow to apply to the button text. - **Drop Shadow**: Select the drop-down to choose what type of drop shadow to apply to the button text. ![](https://help.punchmark.com/hubfs/knowledge-base/confluence-migration-2026/86442140-1c4c0f1528.png) - [Default HubSpot Blog](https://blog.punchmark.com/blog) [![pm-symbol-blue](https://help.punchmark.com/hs-fs/hubfs/Punchmark%20Branding/pm-symbol-blue.png?width=40&height=45&name=pm-symbol-blue.png "pm-symbol-blue")](https://academy.punchmark.com/knowledge?hsLang=en) Punchmark Resource Center Copyright © 2026, Punchmark