Documentation
Docs

Button

Every website needs a button. This documentation gives an overview of the “Button” presets that come with ska-theme, provides copy-pastable examples of basic and advanced buttons and details about their usage in various contexts.

When using ska-theme you can create a button from anything by adding the Button preset to a block:

Neutral button

Adding the Primary button preset alongside the Button preset produces a primary button:

Primary button

Button presets are automatically applied to WordPress buttons (.wp-element-button) in various locations, including the “Button” blocks in “Buttons” block:

WP button – Default
WP button – Outline
WP button – Neutral

By default the Button preset is set up to use CSS variables for its’ colors (--fg: foreground (text) color, --bg: background color and --accent: focus ring color).

VariablePurpose
--fgForeground – text and icons color
--fg-hoverForeground color on hover
--fg-activeForeground color on active
--bgBackground color
--bg-hoverBackground color on hover
--bg-activeBackground color on active
--accentRing color on focus
--icon-sizeDefault icon size
Button preset default variables

Using the variables, the Primary button preset simply overrides them to produce a button with a different appearance ([--fg:var(--color-site-inverted)] [--bg:var(--color-primary)] [--accent:var(--color-primary)]). Hover and active variables use CSS color-mix() to lighten and darken the --fg and --bg variable values, so they don’t need to be overridden in all cases.

The complementing preset should come after the base preset, otherwise neutral button styles will take precedence:

Block Editor UI showing "Button" and "Primary button" presets applied to a block

Buttons can be <a> elements, <button> elements or anything else. To add a link to a button change the Element type to <a> and add a link from the toolbar:

Changing a block's element type
Adding a link to an <a> element from the block toolbar

Only <a> elements that have a link (href) use the “Pointer” cursor by default but you can change the Tailwind class ([&:is(a[href])]:cursor-pointer) in the Button preset if you don’t agree with this best practice.

Button types

Adding the Outline button preset instead of the Primary button preset will produce an outline button:

Outline button

The outline width can be changed by modifying (or overriding) inset-ring-2 to inset-ring-1, (below example includes font-light rounded-3xl [corner-shape:squircle] as well):

Outline button

A disabled button uses the “not-allowed” cursor and reduced opacity.

Using bg-transparent! border-transparent! hover:underline on a neutral button can produce a link button:

Link button

The rounded-full class can produce a circular button:

Primary pill button

Custom buttons can easily be whipped up on demand (optionally as reusable presets and variations), such as:

Positive button
Negative button
Warning button
Icon button

The theme already comes with an Icon button variation out of the box.

Wide button

Just add horizontal padding with px-* or a minimum width with min-w-*.

Don’t forget an aria-label or title when the button only contains an icon.

Button sizes

The button preset uses em units for padding which allows to apply Tailwind font size classes text-sm, text-lg etc to change the whole button size:

xs button sm button base button lg button xl button 2xl button

Button groups

Yes No Maybe
Go back Confirm

Advanced buttons

As everything is customizable and you have the full power of Tailwind at your fingertips, all types of buttons can be created, such as animated buttons from buttons.ibelick.com – simply copy the HTML, paste it into a Tailwind block, convert the HTML to blocks and edit the button to your liking – you can remove some of the base style classes and instead use the Button preset, and keep what is necessary for the button’s special features. Then, if needed, you can turn the result into a reusable preset and/or variation.

Hover me Thank you
Hover me Thank you
Hover me
Hover me
Hover me
Hover me
Hover me
Hover me
Thank you
Hover me
Hover me Hover me
Hover me
Hover me
Hover me
Hover me

Tips for creating advanced buttons from third party markup

  • Apply the button preset and remove classes that the preset already handles, such as flex, gap, background/text colors, border radius, padding and height. Override button preset’s variables such as --fg, --bg, --accent and --icon-size rather than applying text/bg-{color} classes. Use theme colors like text-site-inverted and primary-light rather than Tailwind palette colors like white and blue-300.
  • When the button contains layered elements with z-index, apply isolate to the button root to prevent conflicts with other elements such as dropdowns, popups, sticky menus.
  • When using group-* selectors and the CSS doesn’t work properly in the editor turn off Tailwind CSS sandboxing from Advanced block settings.
  • Name your blocks, such as “Button text” and “Hover background” for easier identification in the Block Editor list view.
  • Set up root CSS variables for common values used in multiple places, then they can be easily changed from one place or overridden in different contexts.
  • Disable the default block appender to prevent a “+” button from appearing in the editor – you’re not going to be adding additional blocks inside the button once it’s ready.
  • Ensure SVG icons inside buttons use the “Presentation” role which makes them hidden from assistive technologies – there’s no point describing an “Arrow pointing to the right” or similar to screen readers.

Button corners

By default buttons use the default border radius value – the value of --radius CSS variable (via the rounded class), which can be changed by editing the Tailwind configuration. If you want to have “pill”-type buttons, then you should apply rounded-full to the button preset itself rather than changing the default border radius to full.

The new CSS corner-shape property allows for creating unique-looking buttons. For now there is only support for Chrome-based browsers and there is no Tailwind CSS utility for it so a fully arbitrary class needs to be used (which can be done using the “Variables” feature of ska-blocks).

Pill

rounded-full

A primary button

Squircle

[corner-shape:squircle] rounded-3xl

A primary button

Notch

[corner-shape:notch] rounded-sm

A primary button

Scoop

[corner-shape:scoop] rounded-md

A primary button

Bevel

[corner-shape:bevel] rounded-lg

A primary button

Superellipse

[corner-shape:superellipse(-0.5)] hover:[corner-shape:superellipse(-1.5)] px-9 rounded-3xl

A primary button

Abomination

A primary button

Buttons in different contexts

The age-old CSS question: “How do you center this thing?”…

Buttons in regular pages

A button in a WordPress page using the Block Editor

When you insert a button on a page, you may notice that it takes up the full width of the page. This is because ska-theme’s layout is grid-based – when you enter an element at the top level, then it is essentially a grid column that spans the full available content area. When you add the WordPress’ .alignwide class it spans even more “columns”, giving it a “breakout” effect, and .alignfull makes it span the whole viewport. In case of a button though, you probably just want it to flow normally or have it aligned to the center.

Aligning or centering

This is where being able to add Tailwind classes to everything comes in handy once again – add the place-self-start class to the button, and it does what it says on the tin – places itself to the start:

A button using justify-self-start Tailwind class in the block editor

Change it to place-self-center and it goes to the center – no wrappers needed:

A button using justify-self-center Tailwind class in the block editor

This doesn’t just apply to buttons – any root level element can be aligned like that. Using place-self-* is a shorthand that works on both axes, meaning it’s the same as using justify-self-* and align-self-* together – you could also only use the justify-self-* class – in this case they have the same result.

Alternatively, you can wrap button in another element:

Wrapping a button in an element using the Grouping function from block editor toolbar

…producing a <div> -> <a>, where <div> is now the element that spans full width, and the button flows naturally inside of it:

Button block wrapped in an Element block

Now you could add text-center to the <div> to center the button, or give the <div> a different layout such as flex, block or grid using Tailwind classes and align based on how these display methods function.

Buttons in blog posts

While powerful, this place-self-* mumbo-jumbo is probably too advanced for the average user who’s not familiar with Tailwind nor responsible for designing the site but is just writing a blog post. This is why the Prose preset (that is applied to all blog posts automatically) comes with place-self-start already applied to buttons, specifically using the prose-ska-button variant, which targets .ska-preset--ska-theme--button class name in prose context (but excluding .not-prose descendants), which is applied whenever you use the Button preset.

A button in a blog post context

You can still apply place-self-center to the button (may need the ! important modifier for specificity) or use any other method of alignment.

The button also has bottom margin (mb-(--spacing-prose)) to keep the spacing consistent for any content that may come after it. If you don’t want bottom margin you can either use the mb-0! class which overrides the margin or the not-prose class (on the button itself or on one of the parent elements) which prevents the prose-specific styles from being applied in the first place.

Editing ska-theme prose preset's prose-ska-button selector

As is typical with ska-theme, it is not hard-coded and set in stone – you can tailor all that functionality to your specific needs by editing the prose-ska-button selector in the Prose preset. The theme provides you with reasonable defaults, but you can change everything to make it your own. Once you edit the Prose preset it will no longer be altered by theme updates, but you will be able to view a diff to see if any useful new classes were added and merge them manually.
Being able to change the functionality rather than override it with additional custom CSS ensures that your site doesn’t become bloated with unused CSS over time – you can even remove things that are not necessary for your use case.