When using ska-theme you can style buttons by adding the Button preset to an element, which uses these classes by default:
inline-block p-[0.75em_1.25em] text-base font-medium !leading-none text-center text-site hover:text-site active:text-site no-underline bg-gray-200 hover:bg-gray-100 active:bg-gray-300 rounded border border-gray-200 hover:border-gray-100 focus:border-primary/80 focus:outline-none focus:ring-[3px] focus:ring-primary/30 transition-all cursor-pointer<!-- wp:ska/text {"skaBlocksAs":{"element":"a","href":"#"},"skaBlocks":{"p":[{"id":"ska-theme:button","isStatic":true}]}} -->
<a href="#" class="wp-block-ska-text ska-text">Neutral button</a>
<!-- /wp:ska/text -->Adding the Primary button preset alongside the Button preset produces a primary button, whose styles are also added to default WordPress buttons in various locations:
<!-- wp:ska/text {"skaBlocksAs":{"element":"a","href":"#"},"skaBlocks":{"p":[{"id":"ska-theme:button","isStatic":true},{"id":"ska-theme:primaryButton","isStatic":true}]}} -->
<a href="#" class="wp-block-ska-text ska-text">Primary button</a>
<!-- /wp:ska/text -->The primary button preset only contains classes that change the colors, so it still relies on the button preset as well:
text-site-inverted hover:text-site-inverted active:text-site-inverted bg-primary hover:bg-primary-light active:bg-primary-light border-primary hover:border-primary-light focus:border-primary-dark/50 active:border-primary-dark/50 focus:ring-primary-light/50The preset should come after the original Button preset, otherwise neutral button styles will take precedence:
Adding the Outline button preset instead of the Primary button preset will produce an outline button:
<!-- wp:ska/text {"skaBlocksAs":{"element":"a","href":"#"},"skaBlocks":{"p":[{"id":"ska-theme:button","isStatic":true},{"id":"ska-theme:outlineButton","isStatic":true}]}} -->
<a href="#" class="wp-block-ska-text ska-text">Outline button</a>
<!-- /wp:ska/text -->The button preset uses em units for padding which allows to apply Tailwind font-size classes text-sm, text-lg etc to change the button size:
<!-- wp:ska/element {"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksFlexDirection":{"v":{"$":{"@":"col"}}},"skaBlocksGap":{"v":{"$":{"@":"2"}}},"skaBlocksAlignItems":{"v":{"$":{"@":"start"}}},"skaBlocks":{"cx":"flex flex-col gap-2 items-start","t":1709756495,"css":".flex{display:flex}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.gap-2{gap:var(\u002d\u002dska-spacing-2)}"}} -->
<div class="flex flex-col gap-2 items-start wp-block-ska-element"><!-- wp:ska/text {"skaBlocksFontSize":{"v":{"$":{"@":"xs"}}},"skaBlocksAs":{"element":"a","href":"#"},"skaBlocks":{"p":[{"id":"ska-theme:button","isStatic":true},{"id":"ska-theme:primaryButton","isStatic":true}],"cx":"text-xs","t":1709756495,"css":".text-xs{font-size:var(\u002d\u002dska-font-size-xs);line-height:var(\u002d\u002dska-font-size-xs-lh)}"}} -->
<a href="#" class="text-xs wp-block-ska-text ska-text">Primary button</a>
<!-- /wp:ska/text -->
<!-- wp:ska/text {"skaBlocksFontSize":{"v":{"$":{"@":"sm"}}},"skaBlocksAs":{"element":"a","href":"#"},"skaBlocks":{"p":[{"id":"ska-theme:button","isStatic":true},{"id":"ska-theme:primaryButton","isStatic":true}],"cx":"text-sm","t":1709756495,"css":".text-sm{font-size:var(\u002d\u002dska-font-size-sm);line-height:var(\u002d\u002dska-font-size-sm-lh)}"}} -->
<a href="#" class="text-sm wp-block-ska-text ska-text">Primary button</a>
<!-- /wp:ska/text -->
<!-- wp:ska/text {"skaBlocksFontSize":{"v":{"$":{"@":"base"}}},"skaBlocksAs":{"element":"a","href":"#"},"skaBlocks":{"p":[{"id":"ska-theme:button","isStatic":true},{"id":"ska-theme:primaryButton","isStatic":true}],"cx":"text-base","t":1709756495,"css":".text-base{font-size:var(\u002d\u002dska-font-size-base);line-height:var(\u002d\u002dska-font-size-base-lh)}"}} -->
<a href="#" class="text-base wp-block-ska-text ska-text">Primary button</a>
<!-- /wp:ska/text -->
<!-- wp:ska/text {"skaBlocksFontSize":{"v":{"$":{"@":"lg"}}},"skaBlocksAs":{"element":"a","href":"#"},"skaBlocks":{"p":[{"id":"ska-theme:button","isStatic":true},{"id":"ska-theme:primaryButton","isStatic":true}],"cx":"text-lg","t":1709756495,"css":".text-lg{font-size:var(\u002d\u002dska-font-size-lg);line-height:var(\u002d\u002dska-font-size-lg-lh)}"}} -->
<a href="#" class="text-lg wp-block-ska-text ska-text">Primary button</a>
<!-- /wp:ska/text -->
<!-- wp:ska/text {"skaBlocksFontSize":{"v":{"$":{"@":"xl"}}},"skaBlocksAs":{"element":"a","href":"#"},"skaBlocks":{"p":[{"id":"ska-theme:button","isStatic":true},{"id":"ska-theme:primaryButton","isStatic":true}],"cx":"text-xl","t":1709756495,"css":".text-xl{font-size:var(\u002d\u002dska-font-size-xl);line-height:var(\u002d\u002dska-font-size-xl-lh)}"}} -->
<a href="#" class="text-xl wp-block-ska-text ska-text">Primary button</a>
<!-- /wp:ska/text -->
<!-- wp:ska/text {"skaBlocksFontSize":{"v":{"$":{"@":"2xl"}}},"skaBlocksAs":{"element":"a","href":"#"},"skaBlocks":{"p":[{"id":"ska-theme:button","isStatic":true},{"id":"ska-theme:primaryButton","isStatic":true}],"cx":"text-2xl","t":1709756495,"css":".text-2xl{font-size:var(\u002d\u002dska-font-size-2xl);line-height:var(\u002d\u002dska-font-size-2xl-lh)}"}} -->
<a href="#" class="text-2xl wp-block-ska-text ska-text">Primary button</a>
<!-- /wp:ska/text --></div>
<!-- /wp:ska/element -->Using bg-transparent hover:bg-transparent border-transparent hover:border-transparent hover:underline on a neutral button can produce a link button:
<!-- wp:ska/text {"skaBlocksTextDecoration":{"v":{"$":{"@":""},"hover":{"@":"underline"}}},"skaBlocksBackgroundColor":{"v":{"$":{"@":"transparent"},"hover":{"@":"transparent"}}},"skaBlocksBorderColor":{"v":{"$":{"@":"transparent"},"hover":{"@":"transparent"}}},"skaBlocksAs":{"element":"a","href":"#"},"skaBlocks":{"p":[{"id":"ska-theme:button","isStatic":true}],"cx":"hover:underline bg-transparent hover:bg-transparent border-transparent hover:border-transparent","t":1709756495,"css":".border-transparent{border-color:transparent}.bg-transparent{background-color:transparent}.hover\\:border-transparent:hover{border-color:transparent}.hover\\:bg-transparent:hover{background-color:transparent}.hover\\:underline:hover{text-decoration-line:underline}"}} -->
<a href="#" class="hover:underline bg-transparent hover:bg-transparent border-transparent hover:border-transparent wp-block-ska-text ska-text">Link button</a>
<!-- /wp:ska/text -->The rounded-full class can produce a circular button:
<!-- wp:ska/text {"skaBlocksBorderRadius":{"v":{"$":{"@":"full"}}},"skaBlocksAs":{"element":"a","href":"#"},"skaBlocks":{"p":[{"id":"ska-theme:button","isStatic":true},{"id":"ska-theme:primaryButton","isStatic":true}],"cx":"rounded-full","t":1709756495,"css":".rounded-full{border-radius:var(\u002d\u002dska-border-radius-full)}"}} -->
<a href="#" class="rounded-full wp-block-ska-text ska-text">Primary button</a>
<!-- /wp:ska/text -->Create your own buttons (and presets (and variations)) as needed, such as:
<!-- wp:ska/text {"skaBlocksTextColor":{"v":{"$":{"@":"site-inverted"},"hover":{"@":"site-inverted"},"active":{"@":"site-inverted"}}},"skaBlocksBackgroundColor":{"v":{"$":{"@":"positive/90"},"hover":{"@":"positive/95"},"active":{"@":"positive/100"}}},"skaBlocksBorderColor":{"v":{"$":{"@":"positive"},"hover":{"@":"positive/75"},"focus":{"@":"positive/50"},"active":{"@":"positive/50"}}},"skaBlocksRingColor":{"v":{"$":{"@":""},"focus":{"@":"positive/50"}}},"skaBlocksAs":{"element":"a","href":"#"},"skaBlocks":{"p":[{"id":"ska-theme:button","isStatic":true}],"cx":"text-site-inverted hover:text-site-inverted active:text-site-inverted bg-positive/90 hover:bg-positive/95 active:bg-positive/100 border-positive hover:border-positive/75 focus:border-positive/50 active:border-positive/50 focus:ring-positive/50","t":1709756495,"css":".border-positive{\u002d\u002dtw-border-opacity:1;border-color:rgba(var(\u002d\u002dska-rgb-positive),1)}.bg-positive\\/90{background-color:rgba(var(\u002d\u002dska-rgb-positive),0.9)}.text-site-inverted{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-site-inverted),0.9)}.hover\\:border-positive\\/75:hover{border-color:rgba(var(\u002d\u002dska-rgb-positive),0.75)}.hover\\:bg-positive\\/95:hover{background-color:rgba(var(\u002d\u002dska-rgb-positive),0.95)}.hover\\:text-site-inverted:hover{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-site-inverted),0.9)}.focus\\:border-positive\\/50:focus{border-color:rgba(var(\u002d\u002dska-rgb-positive),0.5)}.focus\\:ring-positive\\/50:focus{\u002d\u002dtw-ring-color:rgba(var(\u002d\u002dska-rgb-positive),0.5)}.active\\:border-positive\\/50:active{border-color:rgba(var(\u002d\u002dska-rgb-positive),0.5)}.active\\:bg-positive\\/100:active{background-color:rgba(var(\u002d\u002dska-rgb-positive),1)}.active\\:text-site-inverted:active{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-site-inverted),0.9)}"}} -->
<a href="#" class="text-site-inverted hover:text-site-inverted active:text-site-inverted bg-positive/90 hover:bg-positive/95 active:bg-positive/100 border-positive hover:border-positive/75 focus:border-positive/50 active:border-positive/50 focus:ring-positive/50 wp-block-ska-text ska-text">Positive button</a>
<!-- /wp:ska/text --><!-- wp:ska/text {"skaBlocksTextColor":{"v":{"$":{"@":"site-inverted"},"hover":{"@":"site-inverted"},"active":{"@":"site-inverted"}}},"skaBlocksBackgroundColor":{"v":{"$":{"@":"negative/90"},"hover":{"@":"negative/95"},"active":{"@":"negative/100"}}},"skaBlocksBorderColor":{"v":{"$":{"@":"negative"},"hover":{"@":"negative/75"},"focus":{"@":"negative/50"},"active":{"@":"negative/50"}}},"skaBlocksRingColor":{"v":{"$":{"@":""},"focus":{"@":"negative/50"}}},"skaBlocksAs":{"element":"a","href":"#"},"skaBlocks":{"p":[{"id":"ska-theme:button","isStatic":true}],"cx":"text-site-inverted hover:text-site-inverted active:text-site-inverted bg-negative/90 hover:bg-negative/95 active:bg-negative/100 border-negative hover:border-negative/75 focus:border-negative/50 active:border-negative/50 focus:ring-negative/50","t":1709756495,"css":".border-negative{\u002d\u002dtw-border-opacity:1;border-color:rgba(var(\u002d\u002dska-rgb-negative),1)}.bg-negative\\/90{background-color:rgba(var(\u002d\u002dska-rgb-negative),0.9)}.text-site-inverted{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-site-inverted),0.9)}.hover\\:border-negative\\/75:hover{border-color:rgba(var(\u002d\u002dska-rgb-negative),0.75)}.hover\\:bg-negative\\/95:hover{background-color:rgba(var(\u002d\u002dska-rgb-negative),0.95)}.hover\\:text-site-inverted:hover{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-site-inverted),0.9)}.focus\\:border-negative\\/50:focus{border-color:rgba(var(\u002d\u002dska-rgb-negative),0.5)}.focus\\:ring-negative\\/50:focus{\u002d\u002dtw-ring-color:rgba(var(\u002d\u002dska-rgb-negative),0.5)}.active\\:border-negative\\/50:active{border-color:rgba(var(\u002d\u002dska-rgb-negative),0.5)}.active\\:bg-negative\\/100:active{background-color:rgba(var(\u002d\u002dska-rgb-negative),1)}.active\\:text-site-inverted:active{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-site-inverted),0.9)}"}} -->
<a href="#" class="text-site-inverted hover:text-site-inverted active:text-site-inverted bg-negative/90 hover:bg-negative/95 active:bg-negative/100 border-negative hover:border-negative/75 focus:border-negative/50 active:border-negative/50 focus:ring-negative/50 wp-block-ska-text ska-text">Negative button</a>
<!-- /wp:ska/text --><!-- wp:ska/text {"skaBlocksTextColor":{"v":{"$":{"@":"site-inverted"},"hover":{"@":"site-inverted"},"active":{"@":"site-inverted"}}},"skaBlocksBackgroundColor":{"v":{"$":{"@":"warning/90"},"hover":{"@":"warning/95"},"active":{"@":"warning/100"}}},"skaBlocksBorderColor":{"v":{"$":{"@":"warning"},"hover":{"@":"warning/75"},"focus":{"@":"warning/50"},"active":{"@":"warning/50"}}},"skaBlocksRingColor":{"v":{"$":{"@":""},"focus":{"@":"warning/50"}}},"skaBlocksAs":{"element":"a","href":"#"},"skaBlocks":{"p":[{"id":"ska-theme:button","isStatic":true}],"cx":"text-site-inverted hover:text-site-inverted active:text-site-inverted bg-warning/90 hover:bg-warning/95 active:bg-warning/100 border-warning hover:border-warning/75 focus:border-warning/50 active:border-warning/50 focus:ring-warning/50","t":1709756495,"css":".border-warning{\u002d\u002dtw-border-opacity:1;border-color:rgba(var(\u002d\u002dska-rgb-warning),1)}.bg-warning\\/90{background-color:rgba(var(\u002d\u002dska-rgb-warning),0.9)}.text-site-inverted{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-site-inverted),0.9)}.hover\\:border-warning\\/75:hover{border-color:rgba(var(\u002d\u002dska-rgb-warning),0.75)}.hover\\:bg-warning\\/95:hover{background-color:rgba(var(\u002d\u002dska-rgb-warning),0.95)}.hover\\:text-site-inverted:hover{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-site-inverted),0.9)}.focus\\:border-warning\\/50:focus{border-color:rgba(var(\u002d\u002dska-rgb-warning),0.5)}.focus\\:ring-warning\\/50:focus{\u002d\u002dtw-ring-color:rgba(var(\u002d\u002dska-rgb-warning),0.5)}.active\\:border-warning\\/50:active{border-color:rgba(var(\u002d\u002dska-rgb-warning),0.5)}.active\\:bg-warning\\/100:active{background-color:rgba(var(\u002d\u002dska-rgb-warning),1)}.active\\:text-site-inverted:active{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-site-inverted),0.9)}"}} -->
<a href="#" class="text-site-inverted hover:text-site-inverted active:text-site-inverted bg-warning/90 hover:bg-warning/95 active:bg-warning/100 border-warning hover:border-warning/75 focus:border-warning/50 active:border-warning/50 focus:ring-warning/50 wp-block-ska-text ska-text">Warning button</a>
<!-- /wp:ska/text --><!-- wp:ska/element {"skaBlocksDisplay":{"v":{"$":{"@":"inline-flex"}}},"skaBlocksFlexDirection":{"v":{"$":{"@":"row"}}},"skaBlocksGap":{"v":{"$":{"@":"2.5"}}},"skaBlocksAlignItems":{"v":{"$":{"@":"center"}}},"skaBlocksAs":{"element":"a","href":"#"},"skaBlocks":{"p":[{"id":"ska-theme:button","isStatic":true}],"cx":"inline-flex flex-row gap-2.5 items-center","t":1709756495,"css":".inline-flex{display:inline-flex}.flex-row{flex-direction:row}.items-center{align-items:center}.gap-2{gap:var(\u002d\u002dska-spacing-2)}.gap-2\\.5{gap:var(\u002d\u002dska-spacing-2\\.5)}"}} -->
<a href="#" class="inline-flex flex-row gap-2.5 items-center wp-block-ska-element"><!-- wp:ska/text -->
<span class="wp-block-ska-text ska-text">Icon button</span>
<!-- /wp:ska/text -->
<!-- wp:ska/image {"mode":"icon","svg":"\u003csvg data-svg-width=\u002224\u0022 data-svg-height=\u002224\u0022 viewBox=\u00220 0 24 24\u0022 fill=\u0022none\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022\u003e\n\u003cpath fill-rule=\u0022evenodd\u0022 clip-rule=\u0022evenodd\u0022 d=\u0022M12.9697 3.96967C13.2626 3.67678 13.7374 3.67678 14.0303 3.96967L21.5303 11.4697C21.671 11.6103 21.75 11.8011 21.75 12C21.75 12.1989 21.671 12.3897 21.5303 12.5303L14.0303 20.0303C13.7374 20.3232 13.2626 20.3232 12.9697 20.0303C12.6768 19.7374 12.6768 19.2626 12.9697 18.9697L19.1893 12.75H3C2.58579 12.75 2.25 12.4142 2.25 12C2.25 11.5858 2.58579 11.25 3 11.25H19.1893L12.9697 5.03033C12.6768 4.73744 12.6768 4.26256 12.9697 3.96967Z\u0022 fill=\u0022currentColor\u0022/\u003e\n\u003c/svg\u003e\n","collection":"heroicons","icon":"24/solid/arrow-right","skaBlocks":{"cx":"w-4 h-auto text-current","t":1709756495,"css":".h-auto{height:auto}.w-4{width:var(\u002d\u002dska-spacing-4)}.text-current{color:currentColor}"},"skaBlocksWidth":{"v":{"$":{"@":"4"}}},"skaBlocksHeight":{"v":{"$":{"@":"auto"}}},"skaBlocksTextColor":{"v":{"$":{"@":"current"}}}} -->
<div role="figure" aria-hidden="true" class="w-4 h-auto text-current wp-block-ska-image"><svg data-svg-width="24" data-svg-height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.9697 3.96967C13.2626 3.67678 13.7374 3.67678 14.0303 3.96967L21.5303 11.4697C21.671 11.6103 21.75 11.8011 21.75 12C21.75 12.1989 21.671 12.3897 21.5303 12.5303L14.0303 20.0303C13.7374 20.3232 13.2626 20.3232 12.9697 20.0303C12.6768 19.7374 12.6768 19.2626 12.9697 18.9697L19.1893 12.75H3C2.58579 12.75 2.25 12.4142 2.25 12C2.25 11.5858 2.58579 11.25 3 11.25H19.1893L12.9697 5.03033C12.6768 4.73744 12.6768 4.26256 12.9697 3.96967Z" fill="currentColor"></path>
</svg></div>
<!-- /wp:ska/image --></a>
<!-- /wp:ska/element --><!-- wp:ska/text {"skaBlocksMinWidth":{"v":{"$":{"@":"!56"}}},"skaBlocksAs":{"element":"a","href":"#"},"skaBlocks":{"p":[{"id":"ska-theme:button","isStatic":true},{"id":"ska-theme:primaryButton","isStatic":true}],"cx":"!min-w-56","t":1709756495,"css":".\\!min-w-56{min-width:var(\u002d\u002dska-spacing-56)!important}"}} -->
<a href="#" class="!min-w-56 wp-block-ska-text ska-text">Wide button</a>
<!-- /wp:ska/text -->