{"id":32,"date":"2025-09-26T08:50:50","date_gmt":"2025-09-26T08:50:50","guid":{"rendered":"https:\/\/ska-blocks.com\/docs\/2025\/09\/26\/button\/"},"modified":"2025-12-20T12:21:33","modified_gmt":"2025-12-20T12:21:33","slug":"button","status":"publish","type":"post","link":"https:\/\/ska-blocks.com\/docs\/button\/","title":{"rendered":"Button"},"content":{"rendered":"\n<p class=\"lead\">Every website needs a button. This documentation gives an overview of the &#8220;Button&#8221; presets that come with ska-theme, provides copy-pastable examples of basic and advanced buttons and details about their usage in various contexts.<\/p>\n\n\n\n<div x-data=\"{clicks: 0}\" x-init=\"$el.querySelectorAll('a[href=&quot;#&quot;]').forEach(el =&gt; el.addEventListener('click', e =&gt; { e.preventDefault(); clicks++; ska_theme.toast({id: 'clicks', content: `You clicked ${clicks} buttons.`, type: 'info'}); clicks === 100 &amp;&amp; ska_theme.toast({content: 'This is not one of those clicker games, you know.', type: 'warning'}) }))\" class=\"[--ska-border-radius-full:0.25rem] [&amp;_a[href=#]]:cursor-default wp-block-ska-element\">\n<p>When using ska-theme you can create a button from anything by adding the <strong>Button preset<\/strong> to a block:<\/p>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" class=\"wp-block-ska-text ska-text ska-preset--ska-theme--button\">Neutral button<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true}],&quot;t&quot;:1758876679},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;wp-block-ska-text ska-text&quot;&gt;Neutral button&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<p>Adding the <strong>Primary button preset<\/strong> alongside the Button preset produces a primary button:<\/p>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" class=\"wp-block-ska-text ska-text ska-preset--ska-theme--button ska-preset--ska-theme--primary-button\">Primary button<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true},{&quot;id&quot;:&quot;ska-theme--primary-button&quot;,&quot;isStatic&quot;:true}],&quot;t&quot;:1758876679},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;wp-block-ska-text ska-text&quot;&gt;Primary button&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<p>Button presets are automatically applied to WordPress buttons (<code>.wp-element-button<\/code>) in various locations, including the &#8220;Button&#8221; blocks in &#8220;Buttons&#8221; block:<\/p>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"[&amp;_:where(.wp-element-button,_.wp-block-button\\_\\_link)]:text-base wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<div class=\"items-stretch wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"#\">WP button &#8211; Default<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link wp-element-button\" href=\"#\">WP button &#8211; Outline<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-ska-neutral\"><a class=\"wp-block-button__link wp-element-button\" href=\"#\">WP button &#8211; Neutral<\/a><\/div>\n<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:buttons {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;items-stretch&quot;,&quot;css&quot;:&quot;.items-stretch{align-items:stretch}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksAlignItems&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;stretch&quot;}}},&quot;layout&quot;:{&quot;type&quot;:&quot;flex&quot;,&quot;verticalAlignment&quot;:&quot;stretch&quot;}} --&gt;\n&lt;div class=&quot;items-stretch wp-block-buttons&quot;&gt;\n&lt;!-- wp:button --&gt;\n&lt;div class=&quot;wp-block-button&quot;&gt;&lt;a class=&quot;wp-block-button__link wp-element-button&quot; href=&quot;#&quot;&gt;WP button - Default&lt;\/a&gt;&lt;\/div&gt;\n&lt;!-- \/wp:button --&gt;\n&lt;!-- wp:button {&quot;className&quot;:&quot;is-style-outline&quot;} --&gt;\n&lt;div class=&quot;wp-block-button is-style-outline&quot;&gt;&lt;a class=&quot;wp-block-button__link wp-element-button&quot; href=&quot;#&quot;&gt;WP button - Outline&lt;\/a&gt;&lt;\/div&gt;\n&lt;!-- \/wp:button --&gt;\n&lt;!-- wp:button {&quot;className&quot;:&quot;is-style-ska-neutral&quot;} --&gt;\n&lt;div class=&quot;wp-block-button is-style-ska-neutral&quot;&gt;&lt;a class=&quot;wp-block-button__link wp-element-button&quot; href=&quot;#&quot;&gt;WP button - Neutral&lt;\/a&gt;&lt;\/div&gt;\n&lt;!-- \/wp:button --&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:buttons --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<p>By default the Button preset is set up to use CSS variables for its&#8217; colors (<code>--fg<\/code>: foreground (text) color, <code>--bg<\/code>: background color and <code>--accent<\/code>: focus ring color).<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Variable<\/th><th>Purpose<\/th><\/tr><\/thead><tbody><tr><td><code>--fg<\/code><\/td><td>Foreground &#8211; text and icons color<\/td><\/tr><tr><td><code>--fg-hover<\/code><\/td><td>Foreground color on hover<\/td><\/tr><tr><td><code>--fg-active<\/code><\/td><td>Foreground color on active<\/td><\/tr><tr><td><code>--bg<\/code><\/td><td>Background color<\/td><\/tr><tr><td><code>--bg-hover<\/code><\/td><td>Background color on hover<\/td><\/tr><tr><td><code>--bg-active<\/code><\/td><td>Background color on active<\/td><\/tr><tr><td><code>--accent<\/code><\/td><td>Ring color on focus<\/td><\/tr><tr><td><code>--icon-size<\/code><\/td><td>Default icon size<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\">Button preset default variables<\/figcaption><\/figure>\n\n\n\n<p>Using the variables, the Primary button preset simply overrides them to produce a button with a different appearance (<code>[--fg:var(--color-site-inverted)] [--bg:var(--color-primary)] [--accent:var(--color-primary)]<\/code>). Hover and active variables use CSS <code>color-mix()<\/code> to lighten and darken the <code>--fg<\/code> and <code>--bg<\/code> variable values, so they don&#8217;t need to be overridden in all cases.<\/p>\n\n\n\n<p>The complementing preset should come after the base preset, otherwise neutral button styles will take precedence:<\/p>\n\n\n\n<div role=\"figure\" class=\"inline-block border wp-block-ska-image image\"><img decoding=\"async\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-37.png\" alt=\"Block Editor UI showing &quot;Button&quot; and &quot;Primary button&quot; presets applied to a block\" width=\"270\" height=\"243\" loading=\"lazy\"\/><\/div>\n\n\n\n<p>Buttons can be <code>&lt;a&gt;<\/code> elements, <code>&lt;button&gt;<\/code> elements or anything else. To add a link to a button change the Element type to <code>&lt;a&gt;<\/code> and add a link from the toolbar:<\/p>\n\n\n\n<div class=\"flex flex-row flex-wrap gap-gutter items-start wp-block-ska-element\">\n<div role=\"figure\" class=\"inline-block border wp-block-ska-image image\"><img decoding=\"async\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-35.png\" alt=\"Changing a block's element type\" width=\"270\" height=\"144\" loading=\"lazy\"\/><\/div>\n\n\n\n<div role=\"figure\" class=\"inline-block border wp-block-ska-image image\"><img decoding=\"async\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-36.png\" alt=\"Adding a link to an <a&gt; element from the block toolbar\" width=\"354\" height=\"259\" loading=\"lazy\" srcset=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-36.png 354w, https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-36-300x219.png 300w\" sizes=\"(max-width: 354px) 100vw, 354px\" \/><\/div>\n<\/div>\n\n\n\n<p>Only <code>&lt;a&gt;<\/code> elements that have a link (<code>href<\/code>) use the &#8220;Pointer&#8221; cursor by default but you can change the Tailwind class (<code>[&amp;:is(a[href])]:cursor-pointer<\/code>) in the Button preset if you don&#8217;t agree with this <a href=\"https:\/\/medium.com\/simple-human\/buttons-shouldnt-have-a-hand-cursor-b11e99ca374b\" target=\"_blank\" rel=\"noreferrer noopener\">best practice<\/a>. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Button types<\/h2>\n\n\n\n<p>Adding the <strong>Outline button preset<\/strong> instead of the Primary button preset will produce an outline button:<\/p>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" class=\"wp-block-ska-text ska-text ska-preset--ska-theme--button ska-preset--ska-theme--outline-button\">Outline button<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true},{&quot;id&quot;:&quot;ska-theme--outline-button&quot;,&quot;isStatic&quot;:true}],&quot;t&quot;:1758876679},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;wp-block-ska-text ska-text&quot;&gt;Outline button&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<p>The outline width can be changed by modifying (or overriding) <code>inset-ring-2<\/code> to <code>inset-ring-1<\/code>, (below example includes <code>font-light rounded-3xl [corner-shape:squircle]<\/code> as well):<\/p>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" class=\"[corner-shape:squircle] font-light rounded-3xl inset-ring-1 wp-block-ska-text ska-text ska-preset--ska-theme--button ska-preset--ska-theme--outline-button\">Outline button<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;[corner-shape:squircle] font-light rounded-3xl inset-ring-1&quot;,&quot;css&quot;:&quot;.\\u005c[corner-shape\\u005c:squircle\\u005c]{corner-shape:squircle}.font-light{--tw-font-weight:var(--font-weight-light);font-weight:var(--font-weight-light)}.rounded-3xl{border-radius:var(--radius-3xl)}.inset-ring-1{--tw-inset-ring-shadow:inset 0 0 0 1px var(--tw-inset-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true},{&quot;id&quot;:&quot;ska-theme--outline-button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;},&quot;skaBlocksVariables&quot;:{&quot;record&quot;:{&quot;corner-shape&quot;:{&quot;value&quot;:&quot;squircle&quot;,&quot;type&quot;:&quot;&quot;}}},&quot;skaBlocksFontWeight&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;light&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;3xl&quot;}}},&quot;skaBlocksInsetRingWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;1&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;[corner-shape:squircle] font-light rounded-3xl inset-ring-1 wp-block-ska-text ska-text&quot;&gt;Outline button&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<p>A disabled button uses the &#8220;not-allowed&#8221; cursor and reduced opacity.<\/p>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<button disabled class=\"wp-block-ska-text ska-text ska-preset--ska-theme--button\">Disabled button<\/button>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true}],&quot;t&quot;:1758876679},&quot;skaBlocksAs&quot;:{&quot;href&quot;:&quot;&quot;,&quot;element&quot;:&quot;button&quot;},&quot;skaBlocksAttributes&quot;:{&quot;record&quot;:{&quot;disabled&quot;:&quot;disabled&quot;}}} --&gt;\n&lt;button disabled class=&quot;wp-block-ska-text ska-text&quot;&gt;Disabled button&lt;\/button&gt;\n&lt;!-- \/wp:ska\/text --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<p>Using <code>bg-transparent! border-transparent! hover:underline<\/code> on a neutral button can produce a link button:<\/p>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" class=\"hover:underline bg-transparent! border-transparent! wp-block-ska-text ska-text ska-preset--ska-theme--button\">Link button<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;hover:underline bg-transparent! border-transparent!&quot;,&quot;css&quot;:&quot;@media (hover:hover){.hover\\u005c:underline:hover{text-decoration-line:underline}}.bg-transparent\\u005c!{background-color:#0000!important}.border-transparent\\u005c!{border-color:#0000!important}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;},&quot;skaBlocksTextDecoration&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;hover&quot;:{&quot;@&quot;:&quot;underline&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;transparent!&quot;}}},&quot;skaBlocksBorderColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;transparent!&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;hover:underline bg-transparent! border-transparent! wp-block-ska-text ska-text&quot;&gt;Link button&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<p>The <code>rounded-full<\/code> class can produce a circular button:<\/p>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" class=\"rounded-full wp-block-ska-text ska-text ska-preset--ska-theme--button ska-preset--ska-theme--primary-button\">Primary pill button<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;rounded-full&quot;,&quot;css&quot;:&quot;.rounded-full{border-radius:3.40282e38px}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true},{&quot;id&quot;:&quot;ska-theme--primary-button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;full&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;rounded-full wp-block-ska-text ska-text&quot;&gt;Primary pill button&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<p>Custom buttons can easily be whipped up on demand (optionally as reusable <a href=\"https:\/\/ska-blocks.com\/docs\/ska-blocks\/presets\/\" data-type=\"post\" data-id=\"327\">presets<\/a> and <a href=\"https:\/\/ska-blocks.com\/docs\/ska-blocks\/variations\/\" data-type=\"post\" data-id=\"339\">variations<\/a>), such as:<\/p>\n\n\n\n<div class=\"wp-block-ska-element\"><div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" class=\"[--fg:var(--color-site-inverted)] [--bg:var(--color-positive)] [--accent:var(--color-positive)] wp-block-ska-text ska-text ska-preset--ska-theme--button\">Positive button<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;[--fg:var(--color-site-inverted)] [--bg:var(--color-positive)] [--accent:var(--color-positive)]&quot;,&quot;css&quot;:&quot;.\\u005c[--fg\\u005c:var\\u005c(--color-site-inverted\\u005c)\\u005c]{--fg:var(--color-site-inverted)}.\\u005c[--bg\\u005c:var\\u005c(--color-positive\\u005c)\\u005c]{--bg:var(--color-positive)}.\\u005c[--accent\\u005c:var\\u005c(--color-positive\\u005c)\\u005c]{--accent:var(--color-positive)}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;},&quot;skaBlocksVariables&quot;:{&quot;record&quot;:{&quot;--fg&quot;:{&quot;value&quot;:&quot;var(--color-site-inverted)&quot;,&quot;type&quot;:&quot;color&quot;},&quot;--bg&quot;:{&quot;value&quot;:&quot;var(--color-positive)&quot;,&quot;type&quot;:&quot;color&quot;},&quot;--accent&quot;:{&quot;value&quot;:&quot;var(--color-positive)&quot;,&quot;type&quot;:&quot;color&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;[--fg:var(--color-site-inverted)] [--bg:var(--color-positive)] [--accent:var(--color-positive)] wp-block-ska-text ska-text&quot;&gt;Positive button&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" class=\"[--fg:var(--color-site-inverted)] [--bg:var(--color-negative)] [--accent:var(--color-negative)] wp-block-ska-text ska-text ska-preset--ska-theme--button\">Negative button<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;[--fg:var(--color-site-inverted)] [--bg:var(--color-negative)] [--accent:var(--color-negative)]&quot;,&quot;css&quot;:&quot;.\\u005c[--fg\\u005c:var\\u005c(--color-site-inverted\\u005c)\\u005c]{--fg:var(--color-site-inverted)}.\\u005c[--bg\\u005c:var\\u005c(--color-negative\\u005c)\\u005c]{--bg:var(--color-negative)}.\\u005c[--accent\\u005c:var\\u005c(--color-negative\\u005c)\\u005c]{--accent:var(--color-negative)}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;},&quot;skaBlocksVariables&quot;:{&quot;record&quot;:{&quot;--fg&quot;:{&quot;value&quot;:&quot;var(--color-site-inverted)&quot;,&quot;type&quot;:&quot;color&quot;},&quot;--bg&quot;:{&quot;value&quot;:&quot;var(--color-negative)&quot;,&quot;type&quot;:&quot;color&quot;},&quot;--accent&quot;:{&quot;value&quot;:&quot;var(--color-negative)&quot;,&quot;type&quot;:&quot;color&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;[--fg:var(--color-site-inverted)] [--bg:var(--color-negative)] [--accent:var(--color-negative)] wp-block-ska-text ska-text&quot;&gt;Negative button&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" class=\"[--fg:var(--color-site-inverted)] [--bg:var(--color-warning)] [--accent:var(--color-warning)] wp-block-ska-text ska-text ska-preset--ska-theme--button\">Warning button<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;[--fg:var(--color-site-inverted)] [--bg:var(--color-warning)] [--accent:var(--color-warning)]&quot;,&quot;css&quot;:&quot;.\\u005c[--fg\\u005c:var\\u005c(--color-site-inverted\\u005c)\\u005c]{--fg:var(--color-site-inverted)}.\\u005c[--bg\\u005c:var\\u005c(--color-warning\\u005c)\\u005c]{--bg:var(--color-warning)}.\\u005c[--accent\\u005c:var\\u005c(--color-warning\\u005c)\\u005c]{--accent:var(--color-warning)}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;},&quot;skaBlocksVariables&quot;:{&quot;record&quot;:{&quot;--fg&quot;:{&quot;value&quot;:&quot;var(--color-site-inverted)&quot;,&quot;type&quot;:&quot;color&quot;},&quot;--bg&quot;:{&quot;value&quot;:&quot;var(--color-warning)&quot;,&quot;type&quot;:&quot;color&quot;},&quot;--accent&quot;:{&quot;value&quot;:&quot;var(--color-warning)&quot;,&quot;type&quot;:&quot;color&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;[--fg:var(--color-site-inverted)] [--bg:var(--color-warning)] [--accent:var(--color-warning)] wp-block-ska-text ska-text&quot;&gt;Warning button&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" class=\"wp-block-ska-element ska-preset--ska-theme--button\">\n<span class=\"wp-block-ska-text ska-text\">Icon button<\/span>\n\n\n\n<div aria-hidden=\"true\" class=\"w-[var(--icon-size,_var(--spacing-4))] h-auto text-current wp-block-ska-image image\"><svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.2803 11.4697C16.5732 11.7626 16.5732 12.2374 16.2803 12.5303L8.78033 20.0303C8.48744 20.3232 8.01256 20.3232 7.71967 20.0303C7.42678 19.7374 7.42678 19.2626 7.71967 18.9697L14.6893 12L7.71967 5.03033C7.42678 4.73744 7.42678 4.26256 7.71967 3.96967C8.01256 3.67678 8.48744 3.67678 8.78033 3.96967L16.2803 11.4697Z\" fill=\"currentColor\"><\/path><\/svg><\/div>\n<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true}],&quot;t&quot;:1758876679},&quot;skaBlocksAppender&quot;:{&quot;type&quot;:&quot;hidden&quot;},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;wp-block-ska-element&quot;&gt;\n&lt;!-- wp:ska\/text --&gt;\n&lt;span class=&quot;wp-block-ska-text ska-text&quot;&gt;Icon button&lt;\/span&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;!-- wp:ska\/image {&quot;mode&quot;:&quot;icon&quot;,&quot;role&quot;:&quot;presentation&quot;,&quot;svg&quot;:&quot;\\u003csvg viewBox=\\u00220 0 24 24\\u0022 fill=\\u0022none\\u0022 xmlns=\\u0022http:\/\/www.w3.org\/2000\/svg\\u0022\\u003e\\u003cpath fill-rule=\\u0022evenodd\\u0022 clip-rule=\\u0022evenodd\\u0022 d=\\u0022M16.2803 11.4697C16.5732 11.7626 16.5732 12.2374 16.2803 12.5303L8.78033 20.0303C8.48744 20.3232 8.01256 20.3232 7.71967 20.0303C7.42678 19.7374 7.42678 19.2626 7.71967 18.9697L14.6893 12L7.71967 5.03033C7.42678 4.73744 7.42678 4.26256 7.71967 3.96967C8.01256 3.67678 8.48744 3.67678 8.78033 3.96967L16.2803 11.4697Z\\u0022 fill=\\u0022currentColor\\u0022\/\\u003e\\u003c\/svg\\u003e&quot;,&quot;collection&quot;:&quot;heroicons&quot;,&quot;icon&quot;:&quot;24\/solid\/chevron-right&quot;,&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;w-[var(--icon-size,_var(--spacing-4))] h-auto text-current&quot;,&quot;css&quot;:&quot;.w-\\u005c[var\\u005c(--icon-size\\u005c,_var\\u005c(--spacing-4\\u005c)\\u005c)\\u005c]{width:var(--icon-size,var(--spacing-4))}.h-auto{height:auto}.text-current{color:currentColor}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;[var(--icon-size,_var(--spacing-4))]&quot;}},&quot;a&quot;:[&quot;[var(--icon-size,_var(--spacing-4))]&quot;]},&quot;skaBlocksHeight&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;auto&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;current&quot;}}}} --&gt;\n&lt;div aria-hidden=&quot;true&quot; class=&quot;w-[var(--icon-size,_var(--spacing-4))] h-auto text-current wp-block-ska-image&quot;&gt;\n&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; clip-rule=&quot;evenodd&quot; d=&quot;M16.2803 11.4697C16.5732 11.7626 16.5732 12.2374 16.2803 12.5303L8.78033 20.0303C8.48744 20.3232 8.01256 20.3232 7.71967 20.0303C7.42678 19.7374 7.42678 19.2626 7.71967 18.9697L14.6893 12L7.71967 5.03033C7.42678 4.73744 7.42678 4.26256 7.71967 3.96967C8.01256 3.67678 8.48744 3.67678 8.78033 3.96967L16.2803 11.4697Z&quot; fill=&quot;currentColor&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/image --&gt;\n&lt;\/a&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<p class=\"-mt-5 text-sm text-site-subtext\">The theme already comes with an Icon button variation out of the box.<\/p>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" class=\"min-w-56! wp-block-ska-text ska-text ska-preset--ska-theme--button ska-preset--ska-theme--primary-button\">Wide button<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;min-w-56!&quot;,&quot;css&quot;:&quot;.min-w-56\\u005c!{min-width:var(--spacing-56)!important}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true},{&quot;id&quot;:&quot;ska-theme--primary-button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;},&quot;skaBlocksMinWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;56!&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;min-w-56! wp-block-ska-text ska-text&quot;&gt;Wide button&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<p class=\"-mt-5 text-sm text-site-subtext\">Just add horizontal padding with <code>px-*<\/code> or a minimum width with <code>min-w-*<\/code>.<\/p>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" aria-label=\"Icon button\" class=\"wp-block-ska-element ska-preset--ska-theme--button\">\n<div aria-hidden=\"true\" class=\"w-4 h-auto text-current wp-block-ska-image image\"><svg 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>\n<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true}],&quot;t&quot;:1758876679},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;},&quot;skaBlocksAttributes&quot;:{&quot;record&quot;:{&quot;aria-label&quot;:&quot;Icon button&quot;}}} --&gt;\n&lt;a href=&quot;#&quot; aria-label=&quot;Icon button&quot; class=&quot;wp-block-ska-element&quot;&gt;\n&lt;!-- wp:ska\/image {&quot;mode&quot;:&quot;svg&quot;,&quot;role&quot;:&quot;presentation&quot;,&quot;svg&quot;:&quot;\\u003csvg viewBox=\\u00220 0 24 24\\u0022 fill=\\u0022none\\u0022 xmlns=\\u0022http:\/\/www.w3.org\/2000\/svg\\u0022\\u003e\\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\\u003c\/svg\\u003e&quot;,&quot;collection&quot;:&quot;heroicons&quot;,&quot;icon&quot;:&quot;24\/solid\/arrow-right&quot;,&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;w-4 h-auto text-current&quot;,&quot;css&quot;:&quot;.w-4{width:var(--spacing-4)}.h-auto{height:auto}.text-current{color:currentColor}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;4&quot;}}},&quot;skaBlocksHeight&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;auto&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;current&quot;}}}} --&gt;\n&lt;div aria-hidden=&quot;true&quot; class=&quot;w-4 h-auto text-current wp-block-ska-image&quot;&gt;\n&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; clip-rule=&quot;evenodd&quot; d=&quot;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&quot; fill=&quot;currentColor&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/image --&gt;\n&lt;\/a&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<p class=\"-mt-5 text-sm text-site-subtext\">Don&#8217;t forget an <code>aria-label<\/code> or <code>title<\/code> when the button only contains an icon.<\/p>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Button sizes<\/h2>\n\n\n\n<p>The button preset uses <code>em<\/code> units for padding which allows to apply Tailwind font size classes <code>text-sm<\/code>, <code>text-lg<\/code> etc to change the whole button size:<\/p>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<div class=\"flex flex-col gap-2 items-start wp-block-ska-element\">\n<a href=\"#\" class=\"text-xs wp-block-ska-text ska-text ska-preset--ska-theme--button ska-preset--ska-theme--primary-button\">xs button<\/a>\n\n\n\n<a href=\"#\" class=\"text-sm wp-block-ska-text ska-text ska-preset--ska-theme--button ska-preset--ska-theme--primary-button\">sm button<\/a>\n\n\n\n<a href=\"#\" class=\"text-base wp-block-ska-text ska-text ska-preset--ska-theme--button ska-preset--ska-theme--primary-button\">base button<\/a>\n\n\n\n<a href=\"#\" class=\"text-lg wp-block-ska-text ska-text ska-preset--ska-theme--button ska-preset--ska-theme--primary-button\">lg button<\/a>\n\n\n\n<a href=\"#\" class=\"text-xl wp-block-ska-text ska-text ska-preset--ska-theme--button ska-preset--ska-theme--primary-button\">xl button<\/a>\n\n\n\n<a href=\"#\" class=\"text-2xl wp-block-ska-text ska-text ska-preset--ska-theme--button ska-preset--ska-theme--primary-button\">2xl button<\/a>\n<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;flex flex-col gap-2 items-start&quot;,&quot;css&quot;:&quot;.flex{display:flex}.flex-col{flex-direction:column}.gap-2{gap:var(--spacing-2)}.items-start{align-items:flex-start}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;flex&quot;}}},&quot;skaBlocksFlexDirection&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;col&quot;}}},&quot;skaBlocksGap&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;2&quot;}}},&quot;skaBlocksAlignItems&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;start&quot;}}}} --&gt;\n&lt;div class=&quot;flex flex-col gap-2 items-start wp-block-ska-element&quot;&gt;\n&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;text-xs&quot;,&quot;css&quot;:&quot;.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true},{&quot;id&quot;:&quot;ska-theme--primary-button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;xs&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;text-xs wp-block-ska-text ska-text&quot;&gt;xs button&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;text-sm&quot;,&quot;css&quot;:&quot;.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true},{&quot;id&quot;:&quot;ska-theme--primary-button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;sm&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;text-sm wp-block-ska-text ska-text&quot;&gt;sm button&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;text-base&quot;,&quot;css&quot;:&quot;.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true},{&quot;id&quot;:&quot;ska-theme--primary-button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;base&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;text-base wp-block-ska-text ska-text&quot;&gt;base button&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;text-lg&quot;,&quot;css&quot;:&quot;.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true},{&quot;id&quot;:&quot;ska-theme--primary-button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;lg&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;text-lg wp-block-ska-text ska-text&quot;&gt;lg button&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;text-xl&quot;,&quot;css&quot;:&quot;.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true},{&quot;id&quot;:&quot;ska-theme--primary-button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;xl&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;text-xl wp-block-ska-text ska-text&quot;&gt;xl button&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;text-2xl&quot;,&quot;css&quot;:&quot;.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true},{&quot;id&quot;:&quot;ska-theme--primary-button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;2xl&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;text-2xl wp-block-ska-text ska-text&quot;&gt;2xl button&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\">Button groups<\/h2>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<div class=\"flex flex-row flex-wrap gap-0 items-stretch *:first:rounded-r-none *:not-first:not-last:rounded-none *:last:rounded-l-none wp-block-ska-element\">\n<a href=\"#\" class=\"wp-block-ska-text ska-text ska-preset--ska-theme--button ska-preset--ska-theme--primary-button\">Yes<\/a>\n\n\n\n<a href=\"#\" class=\"wp-block-ska-text ska-text ska-preset--ska-theme--button ska-preset--ska-theme--primary-button\">No<\/a>\n\n\n\n<a href=\"#\" class=\"wp-block-ska-text ska-text ska-preset--ska-theme--button ska-preset--ska-theme--primary-button\">Maybe<\/a>\n<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;flex flex-row flex-wrap gap-0 items-stretch *:first:rounded-r-none *:not-first:not-last:rounded-none *:last:rounded-l-none&quot;,&quot;css&quot;:&quot;.flex{display:flex}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.gap-0{gap:var(--spacing-0)}.items-stretch{align-items:stretch}:is(.\\u005c*\\u005c:first\\u005c:rounded-r-none\\u003e*):first-child{border-top-right-radius:0;border-bottom-right-radius:0}:is(.\\u005c*\\u005c:not-first\\u005c:not-last\\u005c:rounded-none\\u003e*):not(:first-child):not(:last-child){border-radius:0}:is(.\\u005c*\\u005c:last\\u005c:rounded-l-none\\u003e*):last-child{border-top-left-radius:0;border-bottom-left-radius:0}&quot;,&quot;t&quot;:1758876679,&quot;sb&quot;:false},&quot;skaBlocksAppender&quot;:{&quot;type&quot;:&quot;repeater&quot;,&quot;stripContent&quot;:true},&quot;skaBlocksSelectors&quot;:{&quot;*&quot;:{&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;first&quot;:{&quot;r&quot;:&quot;none&quot;},&quot;not-first:not-last&quot;:{&quot;@&quot;:&quot;none&quot;},&quot;last&quot;:{&quot;l&quot;:&quot;none&quot;}},&quot;t&quot;:&quot;sides&quot;}}},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;flex&quot;}}},&quot;skaBlocksFlexDirection&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;row&quot;}}},&quot;skaBlocksFlexWrap&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;wrap&quot;}}},&quot;skaBlocksGap&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;0&quot;}}},&quot;skaBlocksAlignItems&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;stretch&quot;}}}} --&gt;\n&lt;div class=&quot;flex flex-row flex-wrap gap-0 items-stretch *:first:rounded-r-none *:not-first:not-last:rounded-none *:last:rounded-l-none wp-block-ska-element&quot;&gt;\n&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true},{&quot;id&quot;:&quot;ska-theme--primary-button&quot;,&quot;isStatic&quot;:true}],&quot;t&quot;:1758876679},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;},&quot;skaBlocksVariation&quot;:&quot;ska-theme--button&quot;} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;wp-block-ska-text ska-text&quot;&gt;Yes&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true},{&quot;id&quot;:&quot;ska-theme--primary-button&quot;,&quot;isStatic&quot;:true}],&quot;t&quot;:1758876679},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;},&quot;skaBlocksVariation&quot;:&quot;ska-theme--button&quot;} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;wp-block-ska-text ska-text&quot;&gt;No&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true},{&quot;id&quot;:&quot;ska-theme--primary-button&quot;,&quot;isStatic&quot;:true}],&quot;t&quot;:1758876679},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;},&quot;skaBlocksVariation&quot;:&quot;ska-theme--button&quot;} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;wp-block-ska-text ska-text&quot;&gt;Maybe&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<div class=\"flex isolate flex-row flex-wrap gap-0 items-stretch *:text-lg wp-block-ska-element\">\n<a href=\"#\" class=\"pr-6 rounded-r-none wp-block-ska-text ska-text ska-preset--ska-theme--button\">Go back<\/a>\n\n\n\n<span class=\"before:aspect-square before:grid relative before:absolute before:top-1\/2 before:-left-3.5 before:z-1 before:place-items-center w-px before:w-7 before:text-sm\/relaxed before:text-site-subtext before:content-['or'] before:bg-white before:rounded-full before:-translate-y-1\/2 wp-block-ska-text ska-text\"><\/span>\n\n\n\n<a href=\"#\" class=\"[--fg:var(--color-site-inverted)] [--bg:var(--color-positive)] [--accent:var(--color-positive)] pl-6 rounded-l-none wp-block-ska-text ska-text ska-preset--ska-theme--button\">Confirm<\/a>\n<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;flex isolate flex-row flex-wrap gap-0 items-stretch *:text-lg&quot;,&quot;css&quot;:&quot;.flex{display:flex}.isolate{isolation:isolate}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.gap-0{gap:var(--spacing-0)}.items-stretch{align-items:stretch}:is(.\\u005c*\\u005c:text-lg\\u003e*){font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksAppender&quot;:{&quot;type&quot;:&quot;hidden&quot;},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;flex&quot;}}},&quot;skaBlocksIsolation&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;isolate&quot;}}},&quot;skaBlocksFlexDirection&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;row&quot;}}},&quot;skaBlocksFlexWrap&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;wrap&quot;}}},&quot;skaBlocksGap&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;0&quot;}}},&quot;skaBlocksAlignItems&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;stretch&quot;}}},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;*&quot;:{&quot;@&quot;:&quot;lg&quot;}}}} --&gt;\n&lt;div class=&quot;flex isolate flex-row flex-wrap gap-0 items-stretch *:text-lg wp-block-ska-element&quot;&gt;\n&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;pr-6 rounded-r-none&quot;,&quot;css&quot;:&quot;.pr-6{padding-right:var(--spacing-6)}.rounded-r-none{border-top-right-radius:0;border-bottom-right-radius:0}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;},&quot;skaBlocksVariation&quot;:&quot;ska-theme--button&quot;,&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;r&quot;:&quot;6&quot;}},&quot;t&quot;:&quot;sides&quot;},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;r&quot;:&quot;none&quot;}},&quot;t&quot;:&quot;sides&quot;}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;pr-6 rounded-r-none wp-block-ska-text ska-text&quot;&gt;Go back&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;before:aspect-square before:grid relative before:absolute before:top-1\/2 before:-left-3.5 before:z-1 before:place-items-center w-px before:w-7 before:text-sm\/relaxed before:text-site-subtext before:content-[&#039;or&#039;] before:bg-white before:rounded-full before:-translate-y-1\/2&quot;,&quot;css&quot;:&quot;.before\\u005c:aspect-square:before{content:var(--tw-content);aspect-ratio:1}.before\\u005c:grid:before{content:var(--tw-content);display:grid}.relative{position:relative}.before\\u005c:absolute:before{content:var(--tw-content);position:absolute}.before\\u005c:top-1\\u005c\/2:before{content:var(--tw-content);top:50%}.before\\u005c:-left-3\\u005c.5:before{content:var(--tw-content);left:calc(var(--spacing-3_5)*-1)}.before\\u005c:z-1:before{content:var(--tw-content);z-index:1}.before\\u005c:place-items-center:before{content:var(--tw-content);place-items:center}.w-px{width:1px;width:var(--spacing-px)}.before\\u005c:w-7:before{content:var(--tw-content);width:var(--spacing-7)}.before\\u005c:text-sm\\u005c\/relaxed:before{content:var(--tw-content);font-size:var(--text-sm);line-height:var(--leading-relaxed)}.before\\u005c:text-site-subtext:before{content:var(--tw-content);color:var(--color-site-subtext)}.before\\u005c:content-\\u005c[\\u005c&#039;or\\u005c&#039;\\u005c]:before{content:var(--tw-content);--tw-content:\\u0022or\\u0022;content:var(--tw-content)}.before\\u005c:bg-white:before{content:var(--tw-content);background-color:var(--color-white)}.before\\u005c:rounded-full:before{content:var(--tw-content);border-radius:3.40282e38px}.before\\u005c:-translate-y-1\\u005c\/2:before{content:var(--tw-content);--tw-translate-y:calc(calc(1\/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;span&quot;,&quot;isVoid&quot;:true},&quot;skaBlocksSelectors&quot;:{&quot;before&quot;:{&quot;skaBlocksContent&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;[&#039;or&#039;]&quot;}},&quot;a&quot;:[&quot;[&#039;or&#039;]&quot;]},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;absolute&quot;}}},&quot;skaBlocksZIndex&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;1&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;white&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;full&quot;}}},&quot;skaBlocksAspectRatio&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;square&quot;}}},&quot;skaBlocksWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;7&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site-subtext&quot;}}},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;sm\/relaxed&quot;}}},&quot;skaBlocksTopRightBottomLeft&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;t&quot;:&quot;1\/2&quot;,&quot;l&quot;:&quot;-3.5&quot;}}},&quot;skaBlocksTranslate&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;y&quot;:&quot;-1\/2&quot;}}},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;grid&quot;}}},&quot;skaBlocksPlaceItems&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksVariables&quot;:{&quot;record&quot;:[]}}},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;relative&quot;}}},&quot;skaBlocksWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;px&quot;}}}} --&gt;\n&lt;span class=&quot;before:aspect-square before:grid relative before:absolute before:top-1\/2 before:-left-3.5 before:z-1 before:place-items-center w-px before:w-7 before:text-sm\/relaxed before:text-site-subtext before:content-[&#039;or&#039;] before:bg-white before:rounded-full before:-translate-y-1\/2 wp-block-ska-text ska-text&quot;&gt;&lt;\/span&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;[--fg:var(--color-site-inverted)] [--bg:var(--color-positive)] [--accent:var(--color-positive)] pl-6 rounded-l-none&quot;,&quot;css&quot;:&quot;.\\u005c[--fg\\u005c:var\\u005c(--color-site-inverted\\u005c)\\u005c]{--fg:var(--color-site-inverted)}.\\u005c[--bg\\u005c:var\\u005c(--color-positive\\u005c)\\u005c]{--bg:var(--color-positive)}.\\u005c[--accent\\u005c:var\\u005c(--color-positive\\u005c)\\u005c]{--accent:var(--color-positive)}.pl-6{padding-left:var(--spacing-6)}.rounded-l-none{border-top-left-radius:0;border-bottom-left-radius:0}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;},&quot;skaBlocksVariables&quot;:{&quot;record&quot;:{&quot;--fg&quot;:{&quot;value&quot;:&quot;var(--color-site-inverted)&quot;,&quot;type&quot;:&quot;color&quot;},&quot;--bg&quot;:{&quot;value&quot;:&quot;var(--color-positive)&quot;,&quot;type&quot;:&quot;color&quot;},&quot;--accent&quot;:{&quot;value&quot;:&quot;var(--color-positive)&quot;,&quot;type&quot;:&quot;color&quot;}}},&quot;skaBlocksVariation&quot;:&quot;ska-theme--button&quot;,&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;l&quot;:&quot;6&quot;}},&quot;t&quot;:&quot;sides&quot;},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;l&quot;:&quot;none&quot;}},&quot;t&quot;:&quot;sides&quot;}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;[--fg:var(--color-site-inverted)] [--bg:var(--color-positive)] [--accent:var(--color-positive)] pl-6 rounded-l-none wp-block-ska-text ska-text&quot;&gt;Confirm&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"advanced-buttons\">Advanced buttons<\/h2>\n\n\n\n<p>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 <a href=\"https:\/\/buttons.ibelick.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">buttons from buttons.ibelick.com<\/a> &#8211; simply copy the HTML, paste it into a <a href=\"https:\/\/ska-blocks.com\/docs\/tailwind-block\/\" data-type=\"post\" data-id=\"55\">Tailwind block<\/a>, convert the HTML to blocks and edit the button to your liking &#8211; you can remove some of the base style classes and instead use the Button preset, and keep what is necessary for the button&#8217;s special features. Then, if needed, you can turn the result into a reusable <a href=\"https:\/\/ska-blocks.com\/docs\/presets\/\" data-type=\"post\" data-id=\"46\">preset<\/a> and\/or <a href=\"https:\/\/ska-blocks.com\/docs\/variations\/\" data-type=\"post\" data-id=\"45\">variation<\/a>.<\/p>\n\n\n\n<div id=\"ibelick-button-examples\" class=\"wp-block-ska-element\"><div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" class=\"overflow-hidden relative rounded-md duration-500 group wp-block-ska-element ska-preset--ska-theme--button\">\n<span class=\"transition translate-x-0 group-hover:-translate-x-[150%] wp-block-ska-text ska-text\">Hover me<\/span>\n\n\n\n<span class=\"absolute! transition translate-x-[150%] group-hover:translate-x-0 wp-block-ska-text ska-text\">Thank you<\/span>\n<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;overflow-hidden relative rounded-md duration-500 group&quot;,&quot;css&quot;:&quot;.overflow-hidden{overflow:hidden}.relative{position:relative}.rounded-md{border-radius:var(--radius-md)}.duration-500{--tw-duration:.5s;transition-duration:.5s}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true}],&quot;sb&quot;:false},&quot;skaBlocksAppender&quot;:{&quot;type&quot;:&quot;hidden&quot;},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;,&quot;opensInNewTab&quot;:false},&quot;skaBlocksOverflow&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;hidden&quot;}}},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;relative&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;md&quot;}}},&quot;skaBlocksTransitionDuration&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;500&quot;}}},&quot;skaBlocksGroup&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;overflow-hidden relative rounded-md duration-500 group wp-block-ska-element&quot;&gt;\n&lt;!-- wp:ska\/text {&quot;metadata&quot;:{&quot;name&quot;:&quot;Button text&quot;},&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;transition translate-x-0 group-hover:-translate-x-[150%]&quot;,&quot;css&quot;:&quot;.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.translate-x-0{--tw-translate-x:var(--spacing-0);translate:var(--tw-translate-x)var(--tw-translate-y)}@media (hover:hover){.group-hover\\u005c:-translate-x-\\u005c[150\\u005c%\\u005c]:is(:where(.group):hover *){--tw-translate-x:calc(150%*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}}&quot;,&quot;t&quot;:1758876679,&quot;sb&quot;:false},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksTranslate&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;0&quot;},&quot;group-hover&quot;:{&quot;x&quot;:&quot;-[150%]&quot;}},&quot;a&quot;:[&quot;[150%]&quot;]}} --&gt;\n&lt;span class=&quot;transition translate-x-0 group-hover:-translate-x-[150%] wp-block-ska-text ska-text&quot;&gt;Hover me&lt;\/span&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;!-- wp:ska\/text {&quot;metadata&quot;:{&quot;name&quot;:&quot;Hover text&quot;},&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;absolute! transition translate-x-[150%] group-hover:translate-x-0&quot;,&quot;css&quot;:&quot;.absolute\\u005c!{position:absolute!important}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.translate-x-\\u005c[150\\u005c%\\u005c]{--tw-translate-x:150%;translate:var(--tw-translate-x)var(--tw-translate-y)}@media (hover:hover){.group-hover\\u005c:translate-x-0:is(:where(.group):hover *){--tw-translate-x:var(--spacing-0);translate:var(--tw-translate-x)var(--tw-translate-y)}}&quot;,&quot;t&quot;:1758876679,&quot;sb&quot;:false},&quot;skaBlocksRender&quot;:{&quot;noRender&quot;:false,&quot;editorNoRender&quot;:false},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;absolute!&quot;}}},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksTranslate&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;[150%]&quot;},&quot;group-hover&quot;:{&quot;x&quot;:&quot;0&quot;}},&quot;a&quot;:[&quot;[150%]&quot;]}} --&gt;\n&lt;span class=&quot;absolute! transition translate-x-[150%] group-hover:translate-x-0 wp-block-ska-text ska-text&quot;&gt;Thank you&lt;\/span&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;\/a&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" class=\"overflow-hidden relative gap-y-12 rounded-md duration-500 group wp-block-ska-element ska-preset--ska-theme--button\">\n<span class=\"transition translate-y-0 group-hover:-translate-y-[200%] wp-block-ska-text ska-text\">Hover me<\/span>\n\n\n\n<span class=\"block absolute! transition translate-y-[200%] group-hover:translate-y-0 wp-block-ska-text ska-text\">Thank you<\/span>\n<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;overflow-hidden relative gap-y-12 rounded-md duration-500 group&quot;,&quot;css&quot;:&quot;.overflow-hidden{overflow:hidden}.relative{position:relative}.gap-y-12{row-gap:var(--spacing-12)}.rounded-md{border-radius:var(--radius-md)}.duration-500{--tw-duration:.5s;transition-duration:.5s}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true}],&quot;sb&quot;:false},&quot;skaBlocksAppender&quot;:{&quot;type&quot;:&quot;hidden&quot;},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;,&quot;opensInNewTab&quot;:false},&quot;skaBlocksOverflow&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;hidden&quot;}}},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;relative&quot;}}},&quot;skaBlocksGap&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;row&quot;:&quot;12&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;md&quot;}}},&quot;skaBlocksTransitionDuration&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;500&quot;}}},&quot;skaBlocksGroup&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;overflow-hidden relative gap-y-12 rounded-md duration-500 group wp-block-ska-element&quot;&gt;\n&lt;!-- wp:ska\/text {&quot;metadata&quot;:{&quot;name&quot;:&quot;Button text&quot;},&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;transition translate-y-0 group-hover:-translate-y-[200%]&quot;,&quot;css&quot;:&quot;.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.translate-y-0{--tw-translate-y:var(--spacing-0);translate:var(--tw-translate-x)var(--tw-translate-y)}@media (hover:hover){.group-hover\\u005c:-translate-y-\\u005c[200\\u005c%\\u005c]:is(:where(.group):hover *){--tw-translate-y:calc(200%*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}}&quot;,&quot;t&quot;:1758876679,&quot;sb&quot;:false},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksTranslate&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;&quot;,&quot;y&quot;:&quot;0&quot;},&quot;group-hover&quot;:{&quot;x&quot;:&quot;&quot;,&quot;y&quot;:&quot;-[200%]&quot;}},&quot;a&quot;:[&quot;[200%]&quot;]}} --&gt;\n&lt;span class=&quot;transition translate-y-0 group-hover:-translate-y-[200%] wp-block-ska-text ska-text&quot;&gt;Hover me&lt;\/span&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;!-- wp:ska\/text {&quot;metadata&quot;:{&quot;name&quot;:&quot;Hover text&quot;},&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;block absolute! transition translate-y-[200%] group-hover:translate-y-0&quot;,&quot;css&quot;:&quot;.block{display:block}.absolute\\u005c!{position:absolute!important}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.translate-y-\\u005c[200\\u005c%\\u005c]{--tw-translate-y:200%;translate:var(--tw-translate-x)var(--tw-translate-y)}@media (hover:hover){.group-hover\\u005c:translate-y-0:is(:where(.group):hover *){--tw-translate-y:var(--spacing-0);translate:var(--tw-translate-x)var(--tw-translate-y)}}&quot;,&quot;t&quot;:1758876679,&quot;sb&quot;:false},&quot;skaBlocksRender&quot;:{&quot;noRender&quot;:false,&quot;editorNoRender&quot;:false},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;block&quot;}}},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;absolute!&quot;}}},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksTranslate&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;&quot;,&quot;y&quot;:&quot;[200%]&quot;},&quot;group-hover&quot;:{&quot;x&quot;:&quot;&quot;,&quot;y&quot;:&quot;0&quot;}},&quot;a&quot;:[&quot;[200%]&quot;]}} --&gt;\n&lt;span class=&quot;block absolute! transition translate-y-[200%] group-hover:translate-y-0 wp-block-ska-text ska-text&quot;&gt;Thank you&lt;\/span&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;\/a&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" class=\"group wp-block-ska-element ska-preset--ska-theme--button ska-preset--ska-theme--primary-button\">\n<span class=\"wp-block-ska-text ska-text\">Hover me<\/span>\n\n\n\n<div aria-hidden=\"true\" class=\"shrink-0 w-[var(--icon-size,_var(--spacing-4))] h-auto text-current transition group-hover:translate-x-1 wp-block-ska-image image\"><svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.2803 11.4697C16.5732 11.7626 16.5732 12.2374 16.2803 12.5303L8.78033 20.0303C8.48744 20.3232 8.01256 20.3232 7.71967 20.0303C7.42678 19.7374 7.42678 19.2626 7.71967 18.9697L14.6893 12L7.71967 5.03033C7.42678 4.73744 7.42678 4.26256 7.71967 3.96967C8.01256 3.67678 8.48744 3.67678 8.78033 3.96967L16.2803 11.4697Z\" fill=\"currentColor\"><\/path><\/svg><\/div>\n<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;group&quot;,&quot;css&quot;:&quot;&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true},{&quot;id&quot;:&quot;ska-theme--primary-button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAppender&quot;:{&quot;type&quot;:&quot;hidden&quot;},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;},&quot;skaBlocksGroup&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;group wp-block-ska-element&quot;&gt;\n&lt;!-- wp:ska\/text --&gt;\n&lt;span class=&quot;wp-block-ska-text ska-text&quot;&gt;Hover me&lt;\/span&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;!-- wp:ska\/image {&quot;mode&quot;:&quot;icon&quot;,&quot;role&quot;:&quot;presentation&quot;,&quot;svg&quot;:&quot;\\u003csvg viewBox=\\u00220 0 24 24\\u0022 fill=\\u0022none\\u0022 xmlns=\\u0022http:\/\/www.w3.org\/2000\/svg\\u0022\\u003e\\u003cpath fill-rule=\\u0022evenodd\\u0022 clip-rule=\\u0022evenodd\\u0022 d=\\u0022M16.2803 11.4697C16.5732 11.7626 16.5732 12.2374 16.2803 12.5303L8.78033 20.0303C8.48744 20.3232 8.01256 20.3232 7.71967 20.0303C7.42678 19.7374 7.42678 19.2626 7.71967 18.9697L14.6893 12L7.71967 5.03033C7.42678 4.73744 7.42678 4.26256 7.71967 3.96967C8.01256 3.67678 8.48744 3.67678 8.78033 3.96967L16.2803 11.4697Z\\u0022 fill=\\u0022currentColor\\u0022\/\\u003e\\u003c\/svg\\u003e&quot;,&quot;collection&quot;:&quot;heroicons&quot;,&quot;icon&quot;:&quot;24\/solid\/chevron-right&quot;,&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;shrink-0 w-[var(--icon-size,_var(--spacing-4))] h-auto text-current transition group-hover:translate-x-1&quot;,&quot;css&quot;:&quot;.shrink-0{flex-shrink:0}.w-\\u005c[var\\u005c(--icon-size\\u005c,_var\\u005c(--spacing-4\\u005c)\\u005c)\\u005c]{width:var(--icon-size,var(--spacing-4))}.h-auto{height:auto}.text-current{color:currentColor}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (hover:hover){.group-hover\\u005c:translate-x-1:is(:where(.group):hover *){--tw-translate-x:var(--spacing-1);translate:var(--tw-translate-x)var(--tw-translate-y)}}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksFlexShrink&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;0&quot;}}},&quot;skaBlocksWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;[var(--icon-size,_var(--spacing-4))]&quot;}},&quot;a&quot;:[&quot;[var(--icon-size,_var(--spacing-4))]&quot;]},&quot;skaBlocksHeight&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;auto&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;current&quot;}}},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksTranslate&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;group-hover&quot;:{&quot;x&quot;:&quot;1&quot;}}}} --&gt;\n&lt;div aria-hidden=&quot;true&quot; class=&quot;shrink-0 w-[var(--icon-size,_var(--spacing-4))] h-auto text-current transition group-hover:translate-x-1 wp-block-ska-image&quot;&gt;\n&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; clip-rule=&quot;evenodd&quot; d=&quot;M16.2803 11.4697C16.5732 11.7626 16.5732 12.2374 16.2803 12.5303L8.78033 20.0303C8.48744 20.3232 8.01256 20.3232 7.71967 20.0303C7.42678 19.7374 7.42678 19.2626 7.71967 18.9697L14.6893 12L7.71967 5.03033C7.42678 4.73744 7.42678 4.26256 7.71967 3.96967C8.01256 3.67678 8.48744 3.67678 8.78033 3.96967L16.2803 11.4697Z&quot; fill=&quot;currentColor&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/image --&gt;\n&lt;\/a&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" class=\"[--fg:var(--color-site-inverted)] [--bg:var(--color-positive)] [--accent:var(--color-positive)] [--icon-size:var(--spacing-4)] gap-3 group wp-block-ska-element ska-preset--ska-theme--button ska-preset--ska-theme--primary-button\">\n<span class=\"wp-block-ska-text ska-text\">Hover me<\/span>\n\n\n\n<div class=\"overflow-hidden relative size-(--icon-size) wp-block-ska-element\">\n<div class=\"absolute transition-all duration-200 group-hover:translate-x-[calc(var(--icon-size)_-_var(--spacing-1))] group-hover:-translate-y-(--icon-size) wp-block-ska-element\">\n<div aria-hidden=\"true\" class=\"w-(--icon-size) h-auto text-current wp-block-ska-image image\"><svg   viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.25 3.75L19.5 3.75C19.6989 3.75 19.8897 3.82902 20.0303 3.96967C20.171 4.11032 20.25 4.30109 20.25 4.5V15.75C20.25 16.1642 19.9142 16.5 19.5 16.5C19.0858 16.5 18.75 16.1642 18.75 15.75V6.31066L5.03033 20.0303C4.73744 20.3232 4.26256 20.3232 3.96967 20.0303C3.67678 19.7374 3.67678 19.2626 3.96967 18.9697L17.6893 5.25L8.25 5.25C7.83579 5.25 7.5 4.91421 7.5 4.5C7.5 4.08579 7.83579 3.75 8.25 3.75Z\" fill=\"currentColor\"><\/path>\n<\/svg><\/div>\n\n\n\n<div aria-hidden=\"true\" class=\"w-(--icon-size) h-auto text-current -translate-x-[calc(var(--icon-size)_-_var(--spacing-1))] wp-block-ska-image image\"><svg   viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.25 3.75L19.5 3.75C19.6989 3.75 19.8897 3.82902 20.0303 3.96967C20.171 4.11032 20.25 4.30109 20.25 4.5V15.75C20.25 16.1642 19.9142 16.5 19.5 16.5C19.0858 16.5 18.75 16.1642 18.75 15.75V6.31066L5.03033 20.0303C4.73744 20.3232 4.26256 20.3232 3.96967 20.0303C3.67678 19.7374 3.67678 19.2626 3.96967 18.9697L17.6893 5.25L8.25 5.25C7.83579 5.25 7.5 4.91421 7.5 4.5C7.5 4.08579 7.83579 3.75 8.25 3.75Z\" fill=\"currentColor\"><\/path>\n<\/svg><\/div>\n<\/div>\n<\/div>\n<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;[--fg:var(--color-site-inverted)] [--bg:var(--color-positive)] [--accent:var(--color-positive)] [--icon-size:var(--spacing-4)] gap-3 group&quot;,&quot;css&quot;:&quot;.\\u005c[--fg\\u005c:var\\u005c(--color-site-inverted\\u005c)\\u005c]{--fg:var(--color-site-inverted)}.\\u005c[--bg\\u005c:var\\u005c(--color-positive\\u005c)\\u005c]{--bg:var(--color-positive)}.\\u005c[--accent\\u005c:var\\u005c(--color-positive\\u005c)\\u005c]{--accent:var(--color-positive)}.\\u005c[--icon-size\\u005c:var\\u005c(--spacing-4\\u005c)\\u005c]{--icon-size:var(--spacing-4)}.gap-3{gap:var(--spacing-3)}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true},{&quot;id&quot;:&quot;ska-theme--primary-button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAppender&quot;:{&quot;type&quot;:&quot;hidden&quot;},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;},&quot;skaBlocksVariables&quot;:{&quot;record&quot;:{&quot;--fg&quot;:{&quot;value&quot;:&quot;var(--color-site-inverted)&quot;,&quot;type&quot;:&quot;color&quot;},&quot;--bg&quot;:{&quot;value&quot;:&quot;var(--color-positive)&quot;,&quot;type&quot;:&quot;color&quot;},&quot;--accent&quot;:{&quot;value&quot;:&quot;var(--color-positive)&quot;,&quot;type&quot;:&quot;color&quot;},&quot;--icon-size&quot;:{&quot;value&quot;:&quot;var(--spacing-4)&quot;,&quot;type&quot;:&quot;spacing&quot;}}},&quot;skaBlocksGap&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;3&quot;}}},&quot;skaBlocksGroup&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;[--fg:var(--color-site-inverted)] [--bg:var(--color-positive)] [--accent:var(--color-positive)] [--icon-size:var(--spacing-4)] gap-3 group wp-block-ska-element&quot;&gt;\n&lt;!-- wp:ska\/text {&quot;metadata&quot;:{&quot;name&quot;:&quot;Button text&quot;}} --&gt;\n&lt;span class=&quot;wp-block-ska-text ska-text&quot;&gt;Hover me&lt;\/span&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;overflow-hidden relative size-(--icon-size)&quot;,&quot;css&quot;:&quot;.overflow-hidden{overflow:hidden}.relative{position:relative}.size-\\u005c(--icon-size\\u005c){width:var(--icon-size);height:var(--icon-size)}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksOverflow&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;hidden&quot;}}},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;relative&quot;}}},&quot;skaBlocksSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;(--icon-size)&quot;}},&quot;a&quot;:[&quot;(--icon-size)&quot;]}} --&gt;\n&lt;div class=&quot;overflow-hidden relative size-(--icon-size) wp-block-ska-element&quot;&gt;\n&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;absolute transition-all duration-200 group-hover:translate-x-[calc(var(--icon-size)_-_var(--spacing-1))] group-hover:-translate-y-(--icon-size)&quot;,&quot;css&quot;:&quot;.absolute{position:absolute}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}@media (hover:hover){.group-hover\\u005c:translate-x-\\u005c[calc\\u005c(var\\u005c(--icon-size\\u005c)_-_var\\u005c(--spacing-1\\u005c)\\u005c)\\u005c]:is(:where(.group):hover *){--tw-translate-x:calc(var(--icon-size) - var(--spacing-1));translate:var(--tw-translate-x)var(--tw-translate-y)}}@media (hover:hover){.group-hover\\u005c:-translate-y-\\u005c(--icon-size\\u005c):is(:where(.group):hover *){--tw-translate-y:calc(var(--icon-size)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;absolute&quot;}}},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;all&quot;}}},&quot;skaBlocksTransitionDuration&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;200&quot;}}},&quot;skaBlocksTranslate&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;group-hover&quot;:{&quot;y&quot;:&quot;-(--icon-size)&quot;,&quot;x&quot;:&quot;[calc(var(--icon-size)_-_var(--spacing-1))]&quot;}},&quot;a&quot;:[&quot;(--icon-size)&quot;,&quot;[calc(var(--icon-size)_-_var(--spacing-1))]&quot;]}} --&gt;\n&lt;div class=&quot;absolute transition-all duration-200 group-hover:translate-x-[calc(var(--icon-size)_-_var(--spacing-1))] group-hover:-translate-y-(--icon-size) wp-block-ska-element&quot;&gt;\n&lt;!-- wp:ska\/image {&quot;mode&quot;:&quot;icon&quot;,&quot;role&quot;:&quot;presentation&quot;,&quot;svg&quot;:&quot;\\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\\t\\u003cpath fill-rule=\\u0022evenodd\\u0022 clip-rule=\\u0022evenodd\\u0022 d=\\u0022M8.25 3.75L19.5 3.75C19.6989 3.75 19.8897 3.82902 20.0303 3.96967C20.171 4.11032 20.25 4.30109 20.25 4.5V15.75C20.25 16.1642 19.9142 16.5 19.5 16.5C19.0858 16.5 18.75 16.1642 18.75 15.75V6.31066L5.03033 20.0303C4.73744 20.3232 4.26256 20.3232 3.96967 20.0303C3.67678 19.7374 3.67678 19.2626 3.96967 18.9697L17.6893 5.25L8.25 5.25C7.83579 5.25 7.5 4.91421 7.5 4.5C7.5 4.08579 7.83579 3.75 8.25 3.75Z\\u0022 fill=\\u0022currentColor\\u0022 \/\\u003e\\n\\u003c\/svg\\u003e&quot;,&quot;collection&quot;:&quot;heroicons&quot;,&quot;icon&quot;:&quot;24\/solid\/arrow-up-right&quot;,&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;w-(--icon-size) h-auto text-current&quot;,&quot;css&quot;:&quot;.w-\\u005c(--icon-size\\u005c){width:var(--icon-size)}.h-auto{height:auto}.text-current{color:currentColor}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;(--icon-size)&quot;}},&quot;a&quot;:[&quot;(--icon-size)&quot;]},&quot;skaBlocksHeight&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;auto&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;current&quot;}}}} --&gt;\n&lt;div aria-hidden=&quot;true&quot; class=&quot;w-(--icon-size) h-auto text-current wp-block-ska-image&quot;&gt;\n&lt;svg data-svg-width=&quot;24&quot; data-svg-height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n\t&lt;path fill-rule=&quot;evenodd&quot; clip-rule=&quot;evenodd&quot; d=&quot;M8.25 3.75L19.5 3.75C19.6989 3.75 19.8897 3.82902 20.0303 3.96967C20.171 4.11032 20.25 4.30109 20.25 4.5V15.75C20.25 16.1642 19.9142 16.5 19.5 16.5C19.0858 16.5 18.75 16.1642 18.75 15.75V6.31066L5.03033 20.0303C4.73744 20.3232 4.26256 20.3232 3.96967 20.0303C3.67678 19.7374 3.67678 19.2626 3.96967 18.9697L17.6893 5.25L8.25 5.25C7.83579 5.25 7.5 4.91421 7.5 4.5C7.5 4.08579 7.83579 3.75 8.25 3.75Z&quot; fill=&quot;currentColor&quot;&gt;&lt;\/path&gt;\n&lt;\/svg&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/image --&gt;\n&lt;!-- wp:ska\/image {&quot;mode&quot;:&quot;icon&quot;,&quot;role&quot;:&quot;presentation&quot;,&quot;svg&quot;:&quot;\\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\\t\\u003cpath fill-rule=\\u0022evenodd\\u0022 clip-rule=\\u0022evenodd\\u0022 d=\\u0022M8.25 3.75L19.5 3.75C19.6989 3.75 19.8897 3.82902 20.0303 3.96967C20.171 4.11032 20.25 4.30109 20.25 4.5V15.75C20.25 16.1642 19.9142 16.5 19.5 16.5C19.0858 16.5 18.75 16.1642 18.75 15.75V6.31066L5.03033 20.0303C4.73744 20.3232 4.26256 20.3232 3.96967 20.0303C3.67678 19.7374 3.67678 19.2626 3.96967 18.9697L17.6893 5.25L8.25 5.25C7.83579 5.25 7.5 4.91421 7.5 4.5C7.5 4.08579 7.83579 3.75 8.25 3.75Z\\u0022 fill=\\u0022currentColor\\u0022 \/\\u003e\\n\\u003c\/svg\\u003e&quot;,&quot;collection&quot;:&quot;heroicons&quot;,&quot;icon&quot;:&quot;24\/solid\/arrow-up-right&quot;,&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;w-(--icon-size) h-auto text-current -translate-x-[calc(var(--icon-size)_-_var(--spacing-1))]&quot;,&quot;css&quot;:&quot;.w-\\u005c(--icon-size\\u005c){width:var(--icon-size)}.h-auto{height:auto}.text-current{color:currentColor}.-translate-x-\\u005c[calc\\u005c(var\\u005c(--icon-size\\u005c)_-_var\\u005c(--spacing-1\\u005c)\\u005c)\\u005c]{--tw-translate-x:calc(calc(var(--icon-size) - var(--spacing-1))*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;(--icon-size)&quot;}},&quot;a&quot;:[&quot;(--icon-size)&quot;]},&quot;skaBlocksHeight&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;auto&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;current&quot;}}},&quot;skaBlocksTranslate&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;-[calc(var(--icon-size)_-_var(--spacing-1))]&quot;}},&quot;a&quot;:[&quot;[calc(var(--icon-size)_-_var(--spacing-1))]&quot;]}} --&gt;\n&lt;div aria-hidden=&quot;true&quot; class=&quot;w-(--icon-size) h-auto text-current -translate-x-[calc(var(--icon-size)_-_var(--spacing-1))] wp-block-ska-image&quot;&gt;\n&lt;svg data-svg-width=&quot;24&quot; data-svg-height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n\t&lt;path fill-rule=&quot;evenodd&quot; clip-rule=&quot;evenodd&quot; d=&quot;M8.25 3.75L19.5 3.75C19.6989 3.75 19.8897 3.82902 20.0303 3.96967C20.171 4.11032 20.25 4.30109 20.25 4.5V15.75C20.25 16.1642 19.9142 16.5 19.5 16.5C19.0858 16.5 18.75 16.1642 18.75 15.75V6.31066L5.03033 20.0303C4.73744 20.3232 4.26256 20.3232 3.96967 20.0303C3.67678 19.7374 3.67678 19.2626 3.96967 18.9697L17.6893 5.25L8.25 5.25C7.83579 5.25 7.5 4.91421 7.5 4.5C7.5 4.08579 7.83579 3.75 8.25 3.75Z&quot; fill=&quot;currentColor&quot;&gt;&lt;\/path&gt;\n&lt;\/svg&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/image --&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/element --&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/element --&gt;\n&lt;\/a&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" class=\"[--fg:var(--color-site-inverted)] [--bg:var(--color-secondary)] [--accent:var(--color-secondary)] overflow-hidden relative px-12 group wp-block-ska-element ska-preset--ska-theme--button\">\n<span class=\"wp-block-ska-text ska-text\">Hover me<\/span>\n\n\n\n<div class=\"flex absolute! inset-0 justify-center size-full group-hover:duration-1000 -translate-x-full group-hover:translate-x-full -skew-12 wp-block-ska-element\">\n<div class=\"relative w-8 h-full bg-white\/20 scale-125 wp-block-ska-text ska-text\"><\/div>\n<\/div>\n<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;[--fg:var(--color-site-inverted)] [--bg:var(--color-secondary)] [--accent:var(--color-secondary)] overflow-hidden relative px-12 group&quot;,&quot;css&quot;:&quot;.\\u005c[--fg\\u005c:var\\u005c(--color-site-inverted\\u005c)\\u005c]{--fg:var(--color-site-inverted)}.\\u005c[--bg\\u005c:var\\u005c(--color-secondary\\u005c)\\u005c]{--bg:var(--color-secondary)}.\\u005c[--accent\\u005c:var\\u005c(--color-secondary\\u005c)\\u005c]{--accent:var(--color-secondary)}.overflow-hidden{overflow:hidden}.relative{position:relative}.px-12{padding-inline:var(--spacing-12)}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAppender&quot;:{&quot;type&quot;:&quot;hidden&quot;},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;,&quot;opensInNewTab&quot;:false},&quot;skaBlocksVariables&quot;:{&quot;record&quot;:{&quot;--fg&quot;:{&quot;value&quot;:&quot;var(--color-site-inverted)&quot;,&quot;type&quot;:&quot;color&quot;},&quot;--bg&quot;:{&quot;value&quot;:&quot;var(--color-secondary)&quot;,&quot;type&quot;:&quot;color&quot;},&quot;--accent&quot;:{&quot;value&quot;:&quot;var(--color-secondary)&quot;,&quot;type&quot;:&quot;color&quot;}}},&quot;skaBlocksOverflow&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;hidden&quot;}}},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;relative&quot;}}},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;12&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksGroup&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;[--fg:var(--color-site-inverted)] [--bg:var(--color-secondary)] [--accent:var(--color-secondary)] overflow-hidden relative px-12 group wp-block-ska-element&quot;&gt;\n&lt;!-- wp:ska\/text {&quot;metadata&quot;:{&quot;name&quot;:&quot;Button text&quot;}} --&gt;\n&lt;span class=&quot;wp-block-ska-text ska-text&quot;&gt;Hover me&lt;\/span&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;flex absolute! inset-0 justify-center size-full group-hover:duration-1000 -translate-x-full group-hover:translate-x-full -skew-12&quot;,&quot;css&quot;:&quot;.flex{display:flex}.absolute\\u005c!{position:absolute!important}.inset-0{inset:var(--spacing-0)}.justify-center{justify-content:center}.size-full{width:100%;height:100%}@media (hover:hover){.group-hover\\u005c:duration-1000:is(:where(.group):hover *){--tw-duration:1s;transition-duration:1s}}.-translate-x-full{--tw-translate-x:-100%;translate:var(--tw-translate-x)var(--tw-translate-y)}@media (hover:hover){.group-hover\\u005c:translate-x-full:is(:where(.group):hover *){--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y)}}.-skew-12{--tw-skew-x:skewX(calc(12deg*-1));--tw-skew-y:skewY(calc(12deg*-1));transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}&quot;,&quot;t&quot;:1758876679,&quot;sb&quot;:false},&quot;skaBlocksAppender&quot;:{&quot;type&quot;:&quot;hidden&quot;},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;div&quot;},&quot;skaBlocksVariables&quot;:{&quot;record&quot;:[]},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;flex&quot;}}},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;absolute!&quot;}}},&quot;skaBlocksTopRightBottomLeft&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;i&quot;:&quot;0&quot;}},&quot;t&quot;:&quot;inset&quot;},&quot;skaBlocksJustifyContent&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;full&quot;}}},&quot;skaBlocksTransitionDuration&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;group-hover&quot;:{&quot;@&quot;:&quot;1000&quot;}}},&quot;skaBlocksTranslate&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;-full&quot;},&quot;group-hover&quot;:{&quot;x&quot;:&quot;full&quot;}}},&quot;skaBlocksSkew&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;-12&quot;}}}} --&gt;\n&lt;div class=&quot;flex absolute! inset-0 justify-center size-full group-hover:duration-1000 -translate-x-full group-hover:translate-x-full -skew-12 wp-block-ska-element&quot;&gt;\n&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;relative w-8 h-full bg-white\/20 scale-125&quot;,&quot;css&quot;:&quot;.relative{position:relative}.w-8{width:var(--spacing-8)}.h-full{height:100%}.bg-white\\u005c\/20{background-color:#fff3}@supports (color:color-mix(in lab, red, red)){.bg-white\\u005c\/20{background-color:color-mix(in oklab,var(--color-white)20%,transparent)}}.scale-125{--tw-scale-x:125%;--tw-scale-y:125%;--tw-scale-z:125%;scale:var(--tw-scale-x)var(--tw-scale-y)}&quot;,&quot;t&quot;:1758876679,&quot;sb&quot;:false},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;div&quot;,&quot;isVoid&quot;:true},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;relative&quot;}}},&quot;skaBlocksWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;8&quot;}}},&quot;skaBlocksHeight&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;full&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;white\/20&quot;}}},&quot;skaBlocksScale&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;125&quot;}}}} --&gt;\n&lt;div class=&quot;relative w-8 h-full bg-white\/20 scale-125 wp-block-ska-text ska-text&quot;&gt;&lt;\/div&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/element --&gt;\n&lt;\/a&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" class=\"isolate relative after:absolute after:top-0 after:left-0 z-0 after:-z-1 px-8 py-4 after:size-full after:bg-inherit rounded-full after:rounded-[inherit] hover:after:opacity-0 hover:after:transition hover:after:duration-500 hover:after:scale-x-125 hover:after:scale-y-150 wp-block-ska-text ska-text ska-preset--ska-theme--button ska-preset--ska-theme--primary-button\">Hover me<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;isolate relative after:absolute after:top-0 after:left-0 z-0 after:-z-1 px-8 py-4 after:size-full after:bg-inherit rounded-full after:rounded-[inherit] hover:after:opacity-0 hover:after:transition hover:after:duration-500 hover:after:scale-x-125 hover:after:scale-y-150&quot;,&quot;css&quot;:&quot;.isolate{isolation:isolate}.relative{position:relative}.after\\u005c:absolute:after{content:var(--tw-content);position:absolute}.after\\u005c:top-0:after{content:var(--tw-content);top:var(--spacing-0)}.after\\u005c:left-0:after{content:var(--tw-content);left:var(--spacing-0)}.z-0{z-index:0}.after\\u005c:-z-1:after{content:var(--tw-content);z-index:calc(1*-1)}.px-8{padding-inline:var(--spacing-8)}.py-4{padding-block:var(--spacing-4)}.after\\u005c:size-full:after{content:var(--tw-content);width:100%;height:100%}.after\\u005c:bg-inherit:after{content:var(--tw-content);background-color:inherit}.rounded-full{border-radius:3.40282e38px}.after\\u005c:rounded-\\u005c[inherit\\u005c]:after{content:var(--tw-content);border-radius:inherit}@media (hover:hover){.hover\\u005c:after\\u005c:opacity-0:hover:after{content:var(--tw-content);opacity:0}}@media (hover:hover){.hover\\u005c:after\\u005c:transition:hover:after{content:var(--tw-content);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}}@media (hover:hover){.hover\\u005c:after\\u005c:duration-500:hover:after{content:var(--tw-content);--tw-duration:.5s;transition-duration:.5s}}@media (hover:hover){.hover\\u005c:after\\u005c:scale-x-125:hover:after{content:var(--tw-content);--tw-scale-x:125%;scale:var(--tw-scale-x)var(--tw-scale-y)}}@media (hover:hover){.hover\\u005c:after\\u005c:scale-y-150:hover:after{content:var(--tw-content);--tw-scale-y:150%;scale:var(--tw-scale-x)var(--tw-scale-y)}}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true},{&quot;id&quot;:&quot;ska-theme--primary-button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;,&quot;opensInNewTab&quot;:false},&quot;skaBlocksSelectors&quot;:{&quot;after&quot;:{&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;absolute&quot;}}},&quot;skaBlocksTopRightBottomLeft&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;t&quot;:&quot;0&quot;,&quot;l&quot;:&quot;0&quot;}}},&quot;skaBlocksZIndex&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;-1&quot;}}},&quot;skaBlocksSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;full&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;[inherit]&quot;}},&quot;a&quot;:[&quot;[inherit]&quot;]},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;inherit&quot;}}},&quot;skaBlocksSelectors&quot;:{&quot;\\u003chover&quot;:{&quot;skaBlocksOpacity&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;0&quot;}}},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksTransitionDuration&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;500&quot;}}},&quot;skaBlocksScale&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;125&quot;,&quot;y&quot;:&quot;150&quot;}}}}}}},&quot;skaBlocksIsolation&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;isolate&quot;}}},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;relative&quot;}}},&quot;skaBlocksZIndex&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;0&quot;}}},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;8&quot;,&quot;y&quot;:&quot;4&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;full&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;isolate relative after:absolute after:top-0 after:left-0 z-0 after:-z-1 px-8 py-4 after:size-full after:bg-inherit rounded-full after:rounded-[inherit] hover:after:opacity-0 hover:after:transition hover:after:duration-500 hover:after:scale-x-125 hover:after:scale-y-150 wp-block-ska-text ska-text&quot;&gt;Hover me&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" class=\"overflow-hidden relative px-6 border-0 transition group wp-block-ska-element ska-preset--ska-theme--button ska-preset--ska-theme--primary-button\">\n<span class=\"wp-block-ska-text ska-text\">Hover me<\/span>\n\n\n\n<div class=\"absolute! inset-0 w-0 group-hover:w-full h-full bg-white\/30 transition-[width] wp-block-ska-text ska-text\"><\/div>\n<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;overflow-hidden relative px-6 border-0 transition group&quot;,&quot;css&quot;:&quot;.overflow-hidden{overflow:hidden}.relative{position:relative}.px-6{padding-inline:var(--spacing-6)}.border-0{border-style:var(--tw-border-style);border-width:0}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true},{&quot;id&quot;:&quot;ska-theme--primary-button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAppender&quot;:{&quot;type&quot;:&quot;hidden&quot;},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;,&quot;opensInNewTab&quot;:false},&quot;skaBlocksOverflow&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;hidden&quot;}}},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;relative&quot;}}},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;6&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;0&quot;}}},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksGroup&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;overflow-hidden relative px-6 border-0 transition group wp-block-ska-element&quot;&gt;\n&lt;!-- wp:ska\/text {&quot;metadata&quot;:{&quot;name&quot;:&quot;Button text&quot;}} --&gt;\n&lt;span class=&quot;wp-block-ska-text ska-text&quot;&gt;Hover me&lt;\/span&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;absolute! inset-0 w-0 group-hover:w-full h-full bg-white\/30 transition-[width]&quot;,&quot;css&quot;:&quot;.absolute\\u005c!{position:absolute!important}.inset-0{inset:var(--spacing-0)}.w-0{width:var(--spacing-0)}@media (hover:hover){.group-hover\\u005c:w-full:is(:where(.group):hover *){width:100%}}.h-full{height:100%}.bg-white\\u005c\/30{background-color:#ffffff4d}@supports (color:color-mix(in lab, red, red)){.bg-white\\u005c\/30{background-color:color-mix(in oklab,var(--color-white)30%,transparent)}}.transition-\\u005c[width\\u005c]{transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}&quot;,&quot;t&quot;:1758876679,&quot;sb&quot;:false},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;div&quot;,&quot;isVoid&quot;:true},&quot;skaBlocksVariables&quot;:{&quot;record&quot;:[]},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;absolute!&quot;}}},&quot;skaBlocksTopRightBottomLeft&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;i&quot;:&quot;0&quot;}},&quot;t&quot;:&quot;inset&quot;},&quot;skaBlocksWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;0&quot;},&quot;group-hover&quot;:{&quot;@&quot;:&quot;full&quot;}}},&quot;skaBlocksHeight&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;full&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;white\/30&quot;}}},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;[width]&quot;}},&quot;a&quot;:[&quot;[width]&quot;]}} --&gt;\n&lt;div class=&quot;absolute! inset-0 w-0 group-hover:w-full h-full bg-white\/30 transition-[width] wp-block-ska-text ska-text&quot;&gt;&lt;\/div&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;\/a&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" class=\"[--h:var(--spacing-12)] isolate overflow-hidden relative h-(--h) *:h-(--h) border-0 group wp-block-ska-element ska-preset--ska-theme--button\">\n<span class=\"inline-flex justify-center items-center px-6 text-neutral-950 transition duration-500 translate-y-0 group-hover:-translate-y-[150%] wp-block-ska-text ska-text\">Hover me<\/span>\n\n\n\n<div class=\"inline-flex absolute! justify-center items-center w-full transition duration-500 translate-y-full group-hover:translate-y-0 wp-block-ska-element\">\n<span class=\"absolute! size-full bg-primary transition duration-500 scale-y-0 group-hover:scale-175 translate-y-full group-hover:translate-y-0 skew-y-12 wp-block-ska-text ska-text\"><\/span>\n\n\n\n<span class=\"z-1 text-site-inverted wp-block-ska-text ska-text\">Thank you<\/span>\n<\/div>\n<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;[--h:var(--spacing-12)] isolate overflow-hidden relative h-(--h) *:h-(--h) border-0 group&quot;,&quot;css&quot;:&quot;.\\u005c[--h\\u005c:var\\u005c(--spacing-12\\u005c)\\u005c]{--h:var(--spacing-12)}.isolate{isolation:isolate}.overflow-hidden{overflow:hidden}.relative{position:relative}.h-\\u005c(--h\\u005c){height:var(--h)}:is(.\\u005c*\\u005c:h-\\u005c(--h\\u005c)\\u003e*){height:var(--h)}.border-0{border-style:var(--tw-border-style);border-width:0}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAppender&quot;:{&quot;type&quot;:&quot;hidden&quot;},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;,&quot;opensInNewTab&quot;:false},&quot;skaBlocksVariables&quot;:{&quot;record&quot;:{&quot;--h&quot;:{&quot;value&quot;:&quot;var(--spacing-12)&quot;,&quot;type&quot;:&quot;spacing&quot;}}},&quot;skaBlocksIsolation&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;isolate&quot;}}},&quot;skaBlocksOverflow&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;hidden&quot;}}},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;relative&quot;}}},&quot;skaBlocksHeight&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;(--h)&quot;},&quot;*&quot;:{&quot;@&quot;:&quot;(--h)&quot;}},&quot;a&quot;:[&quot;(--h)&quot;]},&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;0&quot;}}},&quot;skaBlocksGroup&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;[--h:var(--spacing-12)] isolate overflow-hidden relative h-(--h) *:h-(--h) border-0 group wp-block-ska-element&quot;&gt;\n&lt;!-- wp:ska\/text {&quot;metadata&quot;:{&quot;name&quot;:&quot;Button text&quot;},&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;inline-flex justify-center items-center px-6 text-neutral-950 transition duration-500 translate-y-0 group-hover:-translate-y-[150%]&quot;,&quot;css&quot;:&quot;.inline-flex{display:inline-flex}.justify-center{justify-content:center}.items-center{align-items:center}.px-6{padding-inline:var(--spacing-6)}.text-neutral-950{color:var(--color-neutral-950)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-500{--tw-duration:.5s;transition-duration:.5s}.translate-y-0{--tw-translate-y:var(--spacing-0);translate:var(--tw-translate-x)var(--tw-translate-y)}@media (hover:hover){.group-hover\\u005c:-translate-y-\\u005c[150\\u005c%\\u005c]:is(:where(.group):hover *){--tw-translate-y:calc(150%*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;inline-flex&quot;}}},&quot;skaBlocksJustifyContent&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksAlignItems&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;6&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;neutral-950&quot;}}},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksTransitionDuration&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;500&quot;}}},&quot;skaBlocksTranslate&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;y&quot;:&quot;0&quot;},&quot;group-hover&quot;:{&quot;y&quot;:&quot;-[150%]&quot;}},&quot;a&quot;:[&quot;[150%]&quot;]}} --&gt;\n&lt;span class=&quot;inline-flex justify-center items-center px-6 text-neutral-950 transition duration-500 translate-y-0 group-hover:-translate-y-[150%] wp-block-ska-text ska-text&quot;&gt;Hover me&lt;\/span&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;inline-flex absolute! justify-center items-center w-full transition duration-500 translate-y-full group-hover:translate-y-0&quot;,&quot;css&quot;:&quot;.inline-flex{display:inline-flex}.absolute\\u005c!{position:absolute!important}.justify-center{justify-content:center}.items-center{align-items:center}.w-full{width:100%}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-500{--tw-duration:.5s;transition-duration:.5s}.translate-y-full{--tw-translate-y:100%;translate:var(--tw-translate-x)var(--tw-translate-y)}@media (hover:hover){.group-hover\\u005c:translate-y-0:is(:where(.group):hover *){--tw-translate-y:var(--spacing-0);translate:var(--tw-translate-x)var(--tw-translate-y)}}&quot;,&quot;t&quot;:1758876679,&quot;sb&quot;:false},&quot;skaBlocksAppender&quot;:{&quot;type&quot;:&quot;hidden&quot;},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;div&quot;},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;inline-flex&quot;}}},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;absolute!&quot;}}},&quot;skaBlocksJustifyContent&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksAlignItems&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;full&quot;}}},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksTransitionDuration&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;500&quot;}}},&quot;skaBlocksTranslate&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;y&quot;:&quot;full&quot;},&quot;group-hover&quot;:{&quot;y&quot;:&quot;0&quot;}},&quot;a&quot;:[]}} --&gt;\n&lt;div class=&quot;inline-flex absolute! justify-center items-center w-full transition duration-500 translate-y-full group-hover:translate-y-0 wp-block-ska-element&quot;&gt;\n&lt;!-- wp:ska\/text {&quot;metadata&quot;:{&quot;name&quot;:&quot;Hover background&quot;},&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;absolute! size-full bg-primary transition duration-500 scale-y-0 group-hover:scale-175 translate-y-full group-hover:translate-y-0 skew-y-12&quot;,&quot;css&quot;:&quot;.absolute\\u005c!{position:absolute!important}.size-full{width:100%;height:100%}.bg-primary{background-color:var(--color-primary)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-500{--tw-duration:.5s;transition-duration:.5s}.scale-y-0{--tw-scale-y:0%;scale:var(--tw-scale-x)var(--tw-scale-y)}@media (hover:hover){.group-hover\\u005c:scale-175:is(:where(.group):hover *){--tw-scale-x:175%;--tw-scale-y:175%;--tw-scale-z:175%;scale:var(--tw-scale-x)var(--tw-scale-y)}}.translate-y-full{--tw-translate-y:100%;translate:var(--tw-translate-x)var(--tw-translate-y)}@media (hover:hover){.group-hover\\u005c:translate-y-0:is(:where(.group):hover *){--tw-translate-y:var(--spacing-0);translate:var(--tw-translate-x)var(--tw-translate-y)}}.skew-y-12{--tw-skew-y:skewY(12deg);transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}&quot;,&quot;t&quot;:1758876679,&quot;sb&quot;:false},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;span&quot;,&quot;isVoid&quot;:true},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;absolute!&quot;}}},&quot;skaBlocksSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;full&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;primary&quot;}}},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksTransitionDuration&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;500&quot;}}},&quot;skaBlocksScale&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;y&quot;:&quot;0&quot;},&quot;group-hover&quot;:{&quot;@&quot;:&quot;175&quot;}},&quot;a&quot;:[&quot;175&quot;]},&quot;skaBlocksTranslate&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;y&quot;:&quot;full&quot;},&quot;group-hover&quot;:{&quot;y&quot;:&quot;0&quot;}}},&quot;skaBlocksSkew&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;y&quot;:&quot;12&quot;}}}} --&gt;\n&lt;span class=&quot;absolute! size-full bg-primary transition duration-500 scale-y-0 group-hover:scale-175 translate-y-full group-hover:translate-y-0 skew-y-12 wp-block-ska-text ska-text&quot;&gt;&lt;\/span&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;!-- wp:ska\/text {&quot;metadata&quot;:{&quot;name&quot;:&quot;Hover text&quot;},&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;z-1 text-site-inverted&quot;,&quot;css&quot;:&quot;.z-1{z-index:1}.text-site-inverted{color:var(--color-site-inverted)}&quot;,&quot;t&quot;:1758876679,&quot;sb&quot;:false},&quot;skaBlocksZIndex&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;1&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site-inverted&quot;}}}} --&gt;\n&lt;span class=&quot;z-1 text-site-inverted wp-block-ska-text ska-text&quot;&gt;Thank you&lt;\/span&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/element --&gt;\n&lt;\/a&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" class=\"[--fg:var(--color-site)] [--bg:var(--color-white)] [--accent:transparent] border-site-border! shadow-[5px_5px_var(--fg)] hover:shadow-[0_0_var(--fg)] transition-all duration-100 hover:translate-x-[3px] hover:translate-y-[3px] group wp-block-ska-text ska-text ska-preset--ska-theme--button\">Hover me<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;[--fg:var(--color-site)] [--bg:var(--color-white)] [--accent:transparent] border-site-border! shadow-[5px_5px_var(--fg)] hover:shadow-[0_0_var(--fg)] transition-all duration-100 hover:translate-x-[3px] hover:translate-y-[3px] group&quot;,&quot;css&quot;:&quot;.\\u005c[--fg\\u005c:var\\u005c(--color-site\\u005c)\\u005c]{--fg:var(--color-site)}.\\u005c[--bg\\u005c:var\\u005c(--color-white\\u005c)\\u005c]{--bg:var(--color-white)}.\\u005c[--accent\\u005c:transparent\\u005c]{--accent:transparent}.border-site-border\\u005c!{border-color:var(--color-site-border)!important}.shadow-\\u005c[5px_5px_var\\u005c(--fg\\u005c)\\u005c]{--tw-shadow:5px 5px var(--tw-shadow-color,var(--fg));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@media (hover:hover){.hover\\u005c:shadow-\\u005c[0_0_var\\u005c(--fg\\u005c)\\u005c]:hover{--tw-shadow:0 0 var(--tw-shadow-color,var(--fg));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-100{--tw-duration:.1s;transition-duration:.1s}@media (hover:hover){.hover\\u005c:translate-x-\\u005c[3px\\u005c]:hover{--tw-translate-x:3px;translate:var(--tw-translate-x)var(--tw-translate-y)}}@media (hover:hover){.hover\\u005c:translate-y-\\u005c[3px\\u005c]:hover{--tw-translate-y:3px;translate:var(--tw-translate-x)var(--tw-translate-y)}}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;,&quot;opensInNewTab&quot;:false},&quot;skaBlocksVariables&quot;:{&quot;record&quot;:{&quot;--fg&quot;:{&quot;value&quot;:&quot;var(--color-site)&quot;,&quot;type&quot;:&quot;color&quot;},&quot;--bg&quot;:{&quot;value&quot;:&quot;var(--color-white)&quot;,&quot;type&quot;:&quot;color&quot;},&quot;--accent&quot;:{&quot;value&quot;:&quot;transparent&quot;,&quot;type&quot;:&quot;color&quot;}}},&quot;skaBlocksBorderColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site-border!&quot;}}},&quot;skaBlocksBoxShadow&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;[5px_5px_var(--fg)]&quot;},&quot;hover&quot;:{&quot;@&quot;:&quot;[0_0_var(--fg)]&quot;}},&quot;a&quot;:[&quot;[5px_5px_var(--fg)]&quot;,&quot;[0_0_var(--fg)]&quot;]},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;all&quot;}}},&quot;skaBlocksTransitionDuration&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;100&quot;}}},&quot;skaBlocksTranslate&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;hover&quot;:{&quot;x&quot;:&quot;[3px]&quot;,&quot;y&quot;:&quot;[3px]&quot;}},&quot;a&quot;:[&quot;[3px]&quot;]},&quot;skaBlocksGroup&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;[--fg:var(--color-site)] [--bg:var(--color-white)] [--accent:transparent] border-site-border! shadow-[5px_5px_var(--fg)] hover:shadow-[0_0_var(--fg)] transition-all duration-100 hover:translate-x-[3px] hover:translate-y-[3px] group wp-block-ska-text ska-text&quot;&gt;Hover me&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" class=\"relative py-2 text-xl rounded-full group wp-block-ska-element ska-preset--ska-theme--button\">\n<span class=\"inline-flex overflow-hidden relative *:leading-normal wp-block-ska-element\">\n<span class=\"transition duration-500 translate-y-0 group-hover:-translate-y-[110%] skew-y-0 group-hover:skew-y-12 wp-block-ska-text ska-text\">Hover me<\/span>\n\n\n\n<span class=\"absolute! transition duration-500 translate-y-[110%] group-hover:translate-y-0 skew-y-12 group-hover:skew-y-0 wp-block-ska-text ska-text\">Hover me<\/span>\n<\/span>\n<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;relative py-2 text-xl rounded-full group&quot;,&quot;css&quot;:&quot;.relative{position:relative}.py-2{padding-block:var(--spacing-2)}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.rounded-full{border-radius:3.40282e38px}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAppender&quot;:{&quot;type&quot;:&quot;hidden&quot;},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;,&quot;opensInNewTab&quot;:false},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;relative&quot;}}},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;y&quot;:&quot;2&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;xl&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;full&quot;}}},&quot;skaBlocksGroup&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;relative py-2 text-xl rounded-full group wp-block-ska-element&quot;&gt;\n&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;inline-flex overflow-hidden relative *:leading-normal&quot;,&quot;css&quot;:&quot;.inline-flex{display:inline-flex}.overflow-hidden{overflow:hidden}.relative{position:relative}:is(.\\u005c*\\u005c:leading-normal\\u003e*){--tw-leading:var(--leading-normal);line-height:var(--leading-normal)}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksAppender&quot;:{&quot;type&quot;:&quot;hidden&quot;},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;span&quot;},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;inline-flex&quot;}}},&quot;skaBlocksOverflow&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;hidden&quot;}}},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;relative&quot;}}},&quot;skaBlocksLineHeight&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;*&quot;:{&quot;@&quot;:&quot;normal&quot;}}}} --&gt;\n&lt;span class=&quot;inline-flex overflow-hidden relative *:leading-normal wp-block-ska-element&quot;&gt;\n&lt;!-- wp:ska\/text {&quot;metadata&quot;:{&quot;name&quot;:&quot;Button text&quot;},&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;transition duration-500 translate-y-0 group-hover:-translate-y-[110%] skew-y-0 group-hover:skew-y-12&quot;,&quot;css&quot;:&quot;.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-500{--tw-duration:.5s;transition-duration:.5s}.translate-y-0{--tw-translate-y:var(--spacing-0);translate:var(--tw-translate-x)var(--tw-translate-y)}@media (hover:hover){.group-hover\\u005c:-translate-y-\\u005c[110\\u005c%\\u005c]:is(:where(.group):hover *){--tw-translate-y:calc(110%*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}}.skew-y-0{--tw-skew-y:skewY(0deg);transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}@media (hover:hover){.group-hover\\u005c:skew-y-12:is(:where(.group):hover *){--tw-skew-y:skewY(12deg);transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}}&quot;,&quot;t&quot;:1758876679,&quot;sb&quot;:false},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksTransitionDuration&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;500&quot;}}},&quot;skaBlocksTranslate&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;y&quot;:&quot;0&quot;},&quot;group-hover&quot;:{&quot;y&quot;:&quot;-[110%]&quot;}},&quot;a&quot;:[&quot;[110%]&quot;]},&quot;skaBlocksSkew&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;y&quot;:&quot;0&quot;},&quot;group-hover&quot;:{&quot;y&quot;:&quot;12&quot;}}}} --&gt;\n&lt;span class=&quot;transition duration-500 translate-y-0 group-hover:-translate-y-[110%] skew-y-0 group-hover:skew-y-12 wp-block-ska-text ska-text&quot;&gt;Hover me&lt;\/span&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;!-- wp:ska\/text {&quot;metadata&quot;:{&quot;name&quot;:&quot;Hover text&quot;},&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;absolute! transition duration-500 translate-y-[110%] group-hover:translate-y-0 skew-y-12 group-hover:skew-y-0&quot;,&quot;css&quot;:&quot;.absolute\\u005c!{position:absolute!important}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-500{--tw-duration:.5s;transition-duration:.5s}.translate-y-\\u005c[110\\u005c%\\u005c]{--tw-translate-y:110%;translate:var(--tw-translate-x)var(--tw-translate-y)}@media (hover:hover){.group-hover\\u005c:translate-y-0:is(:where(.group):hover *){--tw-translate-y:var(--spacing-0);translate:var(--tw-translate-x)var(--tw-translate-y)}}.skew-y-12{--tw-skew-y:skewY(12deg);transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}@media (hover:hover){.group-hover\\u005c:skew-y-0:is(:where(.group):hover *){--tw-skew-y:skewY(0deg);transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}}&quot;,&quot;t&quot;:1758876679,&quot;sb&quot;:false},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;absolute!&quot;}}},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksTransitionDuration&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;500&quot;}}},&quot;skaBlocksTranslate&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;y&quot;:&quot;[110%]&quot;},&quot;group-hover&quot;:{&quot;y&quot;:&quot;0&quot;}},&quot;a&quot;:[&quot;[110%]&quot;]},&quot;skaBlocksSkew&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;y&quot;:&quot;12&quot;},&quot;group-hover&quot;:{&quot;y&quot;:&quot;0&quot;}}}} --&gt;\n&lt;span class=&quot;absolute! transition duration-500 translate-y-[110%] group-hover:translate-y-0 skew-y-12 group-hover:skew-y-0 wp-block-ska-text ska-text&quot;&gt;Hover me&lt;\/span&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;\/span&gt;\n&lt;!-- \/wp:ska\/element --&gt;\n&lt;\/a&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" class=\"[--bg:transparent] [--bg-active:transparent] [--accent:transparent] relative after:absolute after:right-0 after:bottom-0 after:left-0 px-0 py-1.5 after:w-full after:h-[2px] text-lg after:bg-neutral-800 border-transparent! after:transition-transform after:duration-300 after:ease-[cubic-bezier(0.65_0.05_0.36_1)] after:scale-x-0 hover:after:scale-x-100 after:origin-bottom hover:after:origin-bottom wp-block-ska-text ska-text ska-preset--ska-theme--button\">Hover me<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;[--bg:transparent] [--bg-active:transparent] [--accent:transparent] relative after:absolute after:right-0 after:bottom-0 after:left-0 px-0 py-1.5 after:w-full after:h-[2px] text-lg after:bg-neutral-800 border-transparent! after:transition-transform after:duration-300 after:ease-[cubic-bezier(0.65_0.05_0.36_1)] after:scale-x-0 hover:after:scale-x-100 after:origin-bottom hover:after:origin-bottom&quot;,&quot;css&quot;:&quot;.\\u005c[--bg\\u005c:transparent\\u005c]{--bg:transparent}.\\u005c[--bg-active\\u005c:transparent\\u005c]{--bg-active:transparent}.\\u005c[--accent\\u005c:transparent\\u005c]{--accent:transparent}.relative{position:relative}.after\\u005c:absolute:after{content:var(--tw-content);position:absolute}.after\\u005c:right-0:after{content:var(--tw-content);right:var(--spacing-0)}.after\\u005c:bottom-0:after{content:var(--tw-content);bottom:var(--spacing-0)}.after\\u005c:left-0:after{content:var(--tw-content);left:var(--spacing-0)}.px-0{padding-inline:var(--spacing-0)}.py-1\\u005c.5{padding-block:var(--spacing-1_5)}.after\\u005c:w-full:after{content:var(--tw-content);width:100%}.after\\u005c:h-\\u005c[2px\\u005c]:after{content:var(--tw-content);height:2px}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.after\\u005c:bg-neutral-800:after{content:var(--tw-content);background-color:var(--color-neutral-800)}.border-transparent\\u005c!{border-color:#0000!important}.after\\u005c:transition-transform:after{content:var(--tw-content);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.after\\u005c:duration-300:after{content:var(--tw-content);--tw-duration:.3s;transition-duration:.3s}.after\\u005c:ease-\\u005c[cubic-bezier\\u005c(0\\u005c.65_0\\u005c.05_0\\u005c.36_1\\u005c)\\u005c]:after{content:var(--tw-content);--tw-ease:cubic-bezier(.65 .05 .36 1);transition-timing-function:cubic-bezier(.65 .05 .36 1)}.after\\u005c:scale-x-0:after{content:var(--tw-content);--tw-scale-x:0%;scale:var(--tw-scale-x)var(--tw-scale-y)}@media (hover:hover){.hover\\u005c:after\\u005c:scale-x-100:hover:after{content:var(--tw-content);--tw-scale-x:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}}.after\\u005c:origin-bottom:after{content:var(--tw-content);transform-origin:bottom}@media (hover:hover){.hover\\u005c:after\\u005c:origin-bottom:hover:after{content:var(--tw-content);transform-origin:bottom}}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true}],&quot;sb&quot;:false},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;,&quot;opensInNewTab&quot;:false},&quot;skaBlocksAttributes&quot;:{&quot;record&quot;:[]},&quot;skaBlocksSelectors&quot;:{&quot;after&quot;:{&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;absolute&quot;}}},&quot;skaBlocksTopRightBottomLeft&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;r&quot;:&quot;0&quot;,&quot;b&quot;:&quot;0&quot;,&quot;l&quot;:&quot;0&quot;}}},&quot;skaBlocksWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;full&quot;}}},&quot;skaBlocksHeight&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;[2px]&quot;}},&quot;a&quot;:[&quot;[2px]&quot;]},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;neutral-800&quot;}}},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;transform&quot;}}},&quot;skaBlocksTransitionDuration&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;300&quot;}}},&quot;skaBlocksTransitionTimingFunction&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;[cubic-bezier(0.65_0.05_0.36_1)]&quot;}},&quot;a&quot;:[&quot;[cubic-bezier(0.65_0.05_0.36_1)]&quot;]},&quot;skaBlocksScale&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;0&quot;}}},&quot;skaBlocksTransformOrigin&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;bottom&quot;}}},&quot;skaBlocksSelectors&quot;:{&quot;\\u003chover&quot;:{&quot;skaBlocksScale&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;100&quot;}}},&quot;skaBlocksTransformOrigin&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;bottom&quot;}}}}}}},&quot;skaBlocksVariables&quot;:{&quot;record&quot;:{&quot;--bg&quot;:{&quot;value&quot;:&quot;transparent&quot;,&quot;type&quot;:&quot;&quot;},&quot;--bg-active&quot;:{&quot;value&quot;:&quot;transparent&quot;,&quot;type&quot;:&quot;&quot;},&quot;--accent&quot;:{&quot;value&quot;:&quot;transparent&quot;,&quot;type&quot;:&quot;&quot;}}},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;relative&quot;}}},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;0&quot;,&quot;y&quot;:&quot;1.5&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;lg&quot;}}},&quot;skaBlocksBorderColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;transparent!&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;[--bg:transparent] [--bg-active:transparent] [--accent:transparent] relative after:absolute after:right-0 after:bottom-0 after:left-0 px-0 py-1.5 after:w-full after:h-[2px] text-lg after:bg-neutral-800 border-transparent! after:transition-transform after:duration-300 after:ease-[cubic-bezier(0.65_0.05_0.36_1)] after:scale-x-0 hover:after:scale-x-100 after:origin-bottom hover:after:origin-bottom wp-block-ska-text ska-text&quot;&gt;Hover me&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" class=\"[--bg:transparent] [--bg-active:transparent] relative px-0 py-1.5 text-lg hover:text-(--accent) bg-[position:100%_100%,0_100%] bg-no-repeat bg-[length:100%_2px,0_2px] hover:bg-[length:0_2px,100%_2px] bg-[image:linear-gradient(currentColor,_currentColor),_linear-gradient(var(--accent),_var(--accent))] border-transparent! ring-0! transition-[color,background-size] duration-500 wp-block-ska-text ska-text ska-preset--ska-theme--button\">Hover me<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;[--bg:transparent] [--bg-active:transparent] relative px-0 py-1.5 text-lg hover:text-(--accent) bg-[position:100%_100%,0_100%] bg-no-repeat bg-[length:100%_2px,0_2px] hover:bg-[length:0_2px,100%_2px] bg-[image:linear-gradient(currentColor,_currentColor),_linear-gradient(var(--accent),_var(--accent))] border-transparent! ring-0! transition-[color,background-size] duration-500&quot;,&quot;css&quot;:&quot;.\\u005c[--bg\\u005c:transparent\\u005c]{--bg:transparent}.\\u005c[--bg-active\\u005c:transparent\\u005c]{--bg-active:transparent}.relative{position:relative}.px-0{padding-inline:var(--spacing-0)}.py-1\\u005c.5{padding-block:var(--spacing-1_5)}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}@media (hover:hover){.hover\\u005c:text-\\u005c(--accent\\u005c):hover{color:var(--accent)}}.bg-\\u005c[position\\u005c:100\\u005c%_100\\u005c%\\u005c,0_100\\u005c%\\u005c]{background-position:100% 100%,0 100%}.bg-no-repeat{background-repeat:no-repeat}.bg-\\u005c[length\\u005c:100\\u005c%_2px\\u005c,0_2px\\u005c]{background-size:100% 2px,0 2px}@media (hover:hover){.hover\\u005c:bg-\\u005c[length\\u005c:0_2px\\u005c,100\\u005c%_2px\\u005c]:hover{background-size:0 2px,100% 2px}}.bg-\\u005c[image\\u005c:linear-gradient\\u005c(currentColor\\u005c,_currentColor\\u005c)\\u005c,_linear-gradient\\u005c(var\\u005c(--accent\\u005c)\\u005c,_var\\u005c(--accent\\u005c)\\u005c)\\u005c]{background-image:linear-gradient(currentColor,currentColor),linear-gradient(var(--accent),var(--accent))}.border-transparent\\u005c!{border-color:#0000!important}.ring-0\\u005c!{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(0px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor)!important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.transition-\\u005c[color\\u005c,background-size\\u005c]{transition-property:color,background-size;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-500{--tw-duration:.5s;transition-duration:.5s}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true}],&quot;sb&quot;:false},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;,&quot;opensInNewTab&quot;:false},&quot;skaBlocksAttributes&quot;:{&quot;record&quot;:[]},&quot;skaBlocksVariables&quot;:{&quot;record&quot;:{&quot;--bg&quot;:{&quot;value&quot;:&quot;transparent&quot;,&quot;type&quot;:&quot;&quot;},&quot;--bg-active&quot;:{&quot;value&quot;:&quot;transparent&quot;,&quot;type&quot;:&quot;&quot;}}},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;relative&quot;}}},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;0&quot;,&quot;y&quot;:&quot;1.5&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;lg&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;hover&quot;:{&quot;@&quot;:&quot;(--accent)&quot;}},&quot;a&quot;:[&quot;(--c2)&quot;,&quot;(--accent)&quot;]},&quot;skaBlocksBackgroundPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;[position:100%_100%,0_100%]&quot;}},&quot;a&quot;:[&quot;[position:100%_100%,0_100%]&quot;]},&quot;skaBlocksBackgroundRepeat&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;no-repeat&quot;}}},&quot;skaBlocksBackgroundSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;[length:100%_2px,0_2px]&quot;},&quot;hover&quot;:{&quot;@&quot;:&quot;[length:0_2px,100%_2px]&quot;}},&quot;a&quot;:[&quot;[length:100%_2px,0_2px]&quot;,&quot;[length:0_2px,100%_2px]&quot;]},&quot;skaBlocksBackgroundImage&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;[image:linear-gradient(currentColor,_currentColor),_linear-gradient(var(--accent),_var(--accent))]&quot;}},&quot;a&quot;:[&quot;[image:linear-gradient(currentColor,_currentColor),_linear-gradient(var(--accent),_var(--accent))]&quot;]},&quot;skaBlocksBorderColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;transparent!&quot;}}},&quot;skaBlocksRingWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;!0&quot;}}},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;[color,background-size]&quot;}},&quot;a&quot;:[&quot;[color,background-size]&quot;]},&quot;skaBlocksTransitionDuration&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;500&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;[--bg:transparent] [--bg-active:transparent] relative px-0 py-1.5 text-lg hover:text-(--accent) bg-[position:100%_100%,0_100%] bg-no-repeat bg-[length:100%_2px,0_2px] hover:bg-[length:0_2px,100%_2px] bg-[image:linear-gradient(currentColor,_currentColor),_linear-gradient(var(--accent),_var(--accent))] border-transparent! ring-0! transition-[color,background-size] duration-500 wp-block-ska-text ska-text&quot;&gt;Hover me&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" class=\"[--icon-size:var(--spacing-5)] [--fg-hover:var(--color-site-inverted)] [--fg-active:var(--color-site-inverted)] isolate relative pr-14 pl-6 h-14 rounded-full group wp-block-ska-element ska-preset--ska-theme--button\">\n<span class=\"z-1 pr-2 wp-block-ska-text ska-text\">Hover me<\/span>\n\n\n\n<div class=\"inline-flex absolute! right-1 justify-end items-center group-hover:w-[calc(100%_-_var(--spacing-2))] size-[calc(var(--icon-size)_+_var(--spacing-7))] bg-secondary rounded-full transition-[width] wp-block-ska-element\">\n<div aria-hidden=\"true\" class=\"flex justify-center items-center mr-[calc(var(--icon-size)_-_var(--spacing-1_5))] *:size-(--icon-size) text-site-inverted wp-block-ska-image image\"><svg viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"  >\n\t<path d=\"M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z\" fill=\"currentColor\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"><\/path>\n<\/svg><\/div>\n<\/div>\n<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;[--icon-size:var(--spacing-5)] [--fg-hover:var(--color-site-inverted)] [--fg-active:var(--color-site-inverted)] isolate relative pr-14 pl-6 h-14 rounded-full group&quot;,&quot;css&quot;:&quot;.\\u005c[--icon-size\\u005c:var\\u005c(--spacing-5\\u005c)\\u005c]{--icon-size:var(--spacing-5)}.\\u005c[--fg-hover\\u005c:var\\u005c(--color-site-inverted\\u005c)\\u005c]{--fg-hover:var(--color-site-inverted)}.\\u005c[--fg-active\\u005c:var\\u005c(--color-site-inverted\\u005c)\\u005c]{--fg-active:var(--color-site-inverted)}.isolate{isolation:isolate}.relative{position:relative}.pr-14{padding-right:var(--spacing-14)}.pl-6{padding-left:var(--spacing-6)}.h-14{height:var(--spacing-14)}.rounded-full{border-radius:3.40282e38px}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAppender&quot;:{&quot;type&quot;:&quot;hidden&quot;},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;,&quot;opensInNewTab&quot;:false},&quot;skaBlocksVariables&quot;:{&quot;record&quot;:{&quot;--icon-size&quot;:{&quot;value&quot;:&quot;var(--spacing-5)&quot;,&quot;type&quot;:&quot;spacing&quot;},&quot;--fg-hover&quot;:{&quot;value&quot;:&quot;var(--color-site-inverted)&quot;,&quot;type&quot;:&quot;color&quot;},&quot;--fg-active&quot;:{&quot;value&quot;:&quot;var(--color-site-inverted)&quot;,&quot;type&quot;:&quot;color&quot;}}},&quot;skaBlocksIsolation&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;isolate&quot;}}},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;relative&quot;}}},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;y&quot;:&quot;&quot;,&quot;l&quot;:&quot;6&quot;,&quot;r&quot;:&quot;14&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksHeight&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;14&quot;}},&quot;a&quot;:[&quot;[calc(48px+8px)]&quot;]},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;full&quot;}}},&quot;skaBlocksGroup&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;[--icon-size:var(--spacing-5)] [--fg-hover:var(--color-site-inverted)] [--fg-active:var(--color-site-inverted)] isolate relative pr-14 pl-6 h-14 rounded-full group wp-block-ska-element&quot;&gt;\n&lt;!-- wp:ska\/text {&quot;metadata&quot;:{&quot;name&quot;:&quot;Button text&quot;},&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;z-1 pr-2&quot;,&quot;css&quot;:&quot;.z-1{z-index:1}.pr-2{padding-right:var(--spacing-2)}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksZIndex&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;1&quot;}}},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;r&quot;:&quot;2&quot;}},&quot;t&quot;:&quot;sides&quot;,&quot;a&quot;:[]}} --&gt;\n&lt;span class=&quot;z-1 pr-2 wp-block-ska-text ska-text&quot;&gt;Hover me&lt;\/span&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;inline-flex absolute! right-1 justify-end items-center group-hover:w-[calc(100%_-_var(--spacing-2))] size-[calc(var(--icon-size)_+_var(--spacing-7))] bg-secondary rounded-full transition-[width]&quot;,&quot;css&quot;:&quot;.inline-flex{display:inline-flex}.absolute\\u005c!{position:absolute!important}.right-1{right:var(--spacing-1)}.justify-end{justify-content:flex-end}.items-center{align-items:center}@media (hover:hover){.group-hover\\u005c:w-\\u005c[calc\\u005c(100\\u005c%_-_var\\u005c(--spacing-2\\u005c)\\u005c)\\u005c]:is(:where(.group):hover *){width:calc(100% - var(--spacing-2))}}.size-\\u005c[calc\\u005c(var\\u005c(--icon-size\\u005c)_\\u005c+_var\\u005c(--spacing-7\\u005c)\\u005c)\\u005c]{width:calc(var(--icon-size) + var(--spacing-7));height:calc(var(--icon-size) + var(--spacing-7))}.bg-secondary{background-color:var(--color-secondary)}.rounded-full{border-radius:3.40282e38px}.transition-\\u005c[width\\u005c]{transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}&quot;,&quot;t&quot;:1758876679,&quot;sb&quot;:false},&quot;skaBlocksAppender&quot;:{&quot;type&quot;:&quot;hidden&quot;},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;div&quot;},&quot;skaBlocksVariables&quot;:{&quot;record&quot;:[]},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;inline-flex&quot;}}},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;absolute!&quot;}}},&quot;skaBlocksTopRightBottomLeft&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;r&quot;:&quot;1&quot;}}},&quot;skaBlocksJustifyContent&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;end&quot;}}},&quot;skaBlocksAlignItems&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;group-hover&quot;:{&quot;@&quot;:&quot;[calc(100%_-_var(--spacing-2))]&quot;}},&quot;a&quot;:[&quot;[calc(100%_-_var(--spacing-2))]&quot;]},&quot;skaBlocksSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;[calc(var(--icon-size)_+_var(--spacing-7))]&quot;}},&quot;a&quot;:[&quot;[calc(var(--icon-size)_+_var(--spacing-7))]&quot;]},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;secondary&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;full&quot;}}},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;[width]&quot;}},&quot;a&quot;:[&quot;[width]&quot;]}} --&gt;\n&lt;div class=&quot;inline-flex absolute! right-1 justify-end items-center group-hover:w-[calc(100%_-_var(--spacing-2))] size-[calc(var(--icon-size)_+_var(--spacing-7))] bg-secondary rounded-full transition-[width] wp-block-ska-element&quot;&gt;\n&lt;!-- wp:ska\/image {&quot;mode&quot;:&quot;svg&quot;,&quot;role&quot;:&quot;presentation&quot;,&quot;svg&quot;:&quot;\\u003csvg viewBox=\\u00220 0 15 15\\u0022 fill=\\u0022none\\u0022 xmlns=\\u0022http:\/\/www.w3.org\/2000\/svg\\u0022 data-svg-width=\\u002215\\u0022 data-svg-height=\\u002215\\u0022\\u003e\\n\\t\\u003cpath d=\\u0022M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z\\u0022 fill=\\u0022currentColor\\u0022 fill-rule=\\u0022evenodd\\u0022 clip-rule=\\u0022evenodd\\u0022\\u003e\\u003c\/path\\u003e\\n\\u003c\/svg\\u003e&quot;,&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;flex justify-center items-center mr-[calc(var(--icon-size)_-_var(--spacing-1_5))] *:size-(--icon-size) text-site-inverted&quot;,&quot;css&quot;:&quot;.flex{display:flex}.justify-center{justify-content:center}.items-center{align-items:center}.mr-\\u005c[calc\\u005c(var\\u005c(--icon-size\\u005c)_-_var\\u005c(--spacing-1_5\\u005c)\\u005c)\\u005c]{margin-right:calc(var(--icon-size) - var(--spacing-1_5))}:is(.\\u005c*\\u005c:size-\\u005c(--icon-size\\u005c)\\u003e*){width:var(--icon-size);height:var(--icon-size)}.text-site-inverted{color:var(--color-site-inverted)}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;flex&quot;}}},&quot;skaBlocksJustifyContent&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksAlignItems&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksMargin&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;r&quot;:&quot;[calc(var(--icon-size)_-_var(--spacing-1_5))]&quot;}},&quot;t&quot;:&quot;sides&quot;,&quot;a&quot;:[&quot;[calc(var(--icon-size)_-_var(--spacing-1_5))]&quot;]},&quot;skaBlocksSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;*&quot;:{&quot;@&quot;:&quot;(--icon-size)&quot;}},&quot;a&quot;:[&quot;(--icon-size)&quot;]},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site-inverted&quot;}}}} --&gt;\n&lt;div aria-hidden=&quot;true&quot; class=&quot;flex justify-center items-center mr-[calc(var(--icon-size)_-_var(--spacing-1_5))] *:size-(--icon-size) text-site-inverted wp-block-ska-image&quot;&gt;\n&lt;svg viewBox=&quot;0 0 15 15&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; data-svg-width=&quot;15&quot; data-svg-height=&quot;15&quot;&gt;\n\t&lt;path d=&quot;M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z&quot; fill=&quot;currentColor&quot; fill-rule=&quot;evenodd&quot; clip-rule=&quot;evenodd&quot;&gt;&lt;\/path&gt;\n&lt;\/svg&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/image --&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/element --&gt;\n&lt;\/a&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" class=\"text-lg text-site-inverted bg-white bg-gradient-to-b from-primary-light\/75 via-primary to-primary-dark hover:from-primary hover:via-primary hover:to-primary border-primary-dark inset-shadow-2xs active:inset-shadow-none group wp-block-ska-element ska-preset--ska-theme--button ska-preset--ska-theme--primary-button\">\n<span class=\"block transition-transform group-active:translate-y-px transform-gpu wp-block-ska-text ska-text\">Hover me<\/span>\n<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;text-lg text-site-inverted bg-white bg-gradient-to-b from-primary-light\/75 via-primary to-primary-dark hover:from-primary hover:via-primary hover:to-primary border-primary-dark inset-shadow-2xs active:inset-shadow-none group&quot;,&quot;css&quot;:&quot;.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-site-inverted{color:var(--color-site-inverted)}.bg-white{background-color:var(--color-white)}.bg-gradient-to-b{--tw-gradient-position:to bottom in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-primary-light\\u005c\/75{--tw-gradient-from:color-mix(in srgb,color-mix(in oklab,var(--color-primary),white 10%)75%,transparent);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}@supports (color:color-mix(in lab, red, red)){.from-primary-light\\u005c\/75{--tw-gradient-from:color-mix(in oklab,var(--color-primary-light)75%,transparent)}}.via-primary{--tw-gradient-via:var(--color-primary);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-primary-dark{--tw-gradient-to:var(--color-primary-dark);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}@media (hover:hover){.hover\\u005c:from-primary:hover{--tw-gradient-from:var(--color-primary);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}}@media (hover:hover){.hover\\u005c:via-primary:hover{--tw-gradient-via:var(--color-primary);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}}@media (hover:hover){.hover\\u005c:to-primary:hover{--tw-gradient-to:var(--color-primary);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}}.border-primary-dark{border-color:var(--color-primary-dark)}.inset-shadow-2xs{--tw-inset-shadow:inset 0 1px var(--tw-inset-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.active\\u005c:inset-shadow-none:active{--tw-inset-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true},{&quot;id&quot;:&quot;ska-theme--primary-button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAppender&quot;:{&quot;type&quot;:&quot;hidden&quot;},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;,&quot;opensInNewTab&quot;:false},&quot;skaBlocksVariables&quot;:{&quot;record&quot;:[]},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;lg&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site-inverted&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;white&quot;}}},&quot;skaBlocksBackgroundImage&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;gradient-to-b&quot;}}},&quot;skaBlocksGradientColorStops&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;from&quot;:&quot;primary-light\/75&quot;,&quot;via&quot;:&quot;primary&quot;,&quot;to&quot;:&quot;primary-dark&quot;},&quot;hover&quot;:{&quot;from&quot;:&quot;primary&quot;,&quot;via&quot;:&quot;primary&quot;,&quot;to&quot;:&quot;primary&quot;}},&quot;t&quot;:&quot;default&quot;},&quot;skaBlocksBorderColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;primary-dark&quot;}},&quot;a&quot;:[]},&quot;skaBlocksInsetShadow&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;2xs&quot;},&quot;active&quot;:{&quot;@&quot;:&quot;none&quot;}},&quot;a&quot;:[]},&quot;skaBlocksGroup&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;text-lg text-site-inverted bg-white bg-gradient-to-b from-primary-light\/75 via-primary to-primary-dark hover:from-primary hover:via-primary hover:to-primary border-primary-dark inset-shadow-2xs active:inset-shadow-none group wp-block-ska-element&quot;&gt;\n&lt;!-- wp:ska\/text {&quot;metadata&quot;:{&quot;name&quot;:&quot;Button text&quot;},&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;block transition-transform group-active:translate-y-px transform-gpu&quot;,&quot;css&quot;:&quot;.block{display:block}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.group-active\\u005c:translate-y-px:is(:where(.group):active *){--tw-translate-y:var(--spacing-px);translate:var(--tw-translate-x)var(--tw-translate-y);translate:var(--tw-translate-x)var(--tw-translate-y)}.transform-gpu{transform:translateZ(0)var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}&quot;,&quot;t&quot;:1758876679,&quot;sb&quot;:false},&quot;skaBlocksVariables&quot;:{&quot;record&quot;:[]},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;block&quot;}}},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;transform&quot;}}},&quot;skaBlocksTranslate&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;group-active&quot;:{&quot;@&quot;:&quot;&quot;,&quot;y&quot;:&quot;px&quot;}}},&quot;skaBlocksTransform&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;gpu&quot;}}}} --&gt;\n&lt;span class=&quot;block transition-transform group-active:translate-y-px transform-gpu wp-block-ska-text ska-text&quot;&gt;Hover me&lt;\/span&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;\/a&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Tips for creating advanced buttons from third party markup<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Apply the button preset and remove classes that the preset already handles, such as <code>flex<\/code>, gap, background\/text colors, border radius, padding and height. Override button preset&#8217;s variables such as <code>--fg<\/code>, <code>--bg<\/code>, <code>--accent<\/code> and <code>--icon-size<\/code> rather than applying <code>text\/bg-{color}<\/code> classes. Use theme colors like <code>text-site-inverted<\/code> and <code>primary-light<\/code> rather than Tailwind palette colors like <code>white<\/code> and <code>blue-300<\/code>.<\/li>\n\n\n\n<li>When the button contains layered elements with z-index, apply <code>isolate<\/code> to the button root to prevent conflicts with other elements such as dropdowns, popups, sticky menus.<\/li>\n\n\n\n<li>When using <code>group-*<\/code> selectors and the CSS doesn&#8217;t work properly in the editor turn off Tailwind CSS sandboxing from Advanced block settings.<\/li>\n\n\n\n<li>Name your blocks, such as &#8220;Button text&#8221; and &#8220;Hover background&#8221; for easier identification in the Block Editor list view.<\/li>\n\n\n\n<li>Set up root CSS <a href=\"https:\/\/ska-blocks.com\/docs\/variables\/\" data-type=\"post\" data-id=\"23\">variables<\/a> for common values used in multiple places, then they can be easily changed from one place or overridden in different contexts.<\/li>\n\n\n\n<li>Disable the default block appender to prevent a &#8220;+&#8221; button from appearing in the editor &#8211; you&#8217;re not going to be adding additional blocks inside the button once it&#8217;s ready.<\/li>\n\n\n\n<li>Ensure SVG icons inside buttons use the &#8220;Presentation&#8221; role which makes them hidden from assistive technologies &#8211; there&#8217;s no point describing an &#8220;Arrow pointing to the right&#8221; or similar to screen readers.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Button corners<\/h2>\n\n\n\n<p>By default buttons use the default border radius value &#8211; the value of <code>--radius<\/code> CSS variable (via the <code>rounded<\/code> class), which can be changed by <a href=\"https:\/\/ska-blocks.com\/docs\/configuring-tailwind\/\" data-type=\"post\" data-id=\"47\">editing the Tailwind configuration<\/a>. If you want to have &#8220;pill&#8221;-type buttons, then you should apply <code>rounded-full<\/code> to the button preset itself rather than changing the default border radius to full.<\/p>\n\n\n\n<p>The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/corner-shape\" target=\"_blank\" rel=\"noreferrer noopener\">new CSS <code>corner-shape<\/code> property<\/a> allows for creating unique-looking buttons. For now there is only <a href=\"https:\/\/caniuse.com\/mdn-css_properties_corner-shape\" target=\"_blank\" rel=\"noreferrer noopener\">support for Chrome-based browsers<\/a> and there is no Tailwind CSS utility for it so a fully arbitrary class needs to be used (which can be done using <a href=\"https:\/\/ska-blocks.com\/docs\/variables\/\" data-type=\"post\" data-id=\"23\">the &#8220;Variables&#8221; feature of ska-blocks<\/a>).<\/p>\n\n\n\n<div class=\"*:[&amp;&gt;h3]:mb-0! *:[&amp;&gt;p]:mt-0 *:[&amp;&gt;p]:mb-3.5! wp-block-ska-element\">\n<div class=\"wp-block-ska-element\">\n<h3 class=\"wp-block-heading\">Pill<\/h3>\n\n\n\n<p><code>rounded-full<\/code><\/p>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" class=\"rounded-full wp-block-ska-text ska-text ska-preset--ska-theme--button ska-preset--ska-theme--primary-button\">A primary button<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;rounded-full&quot;,&quot;css&quot;:&quot;.rounded-full{border-radius:3.40282e38px}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true},{&quot;id&quot;:&quot;ska-theme--primary-button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;},&quot;skaBlocksVariables&quot;:{&quot;record&quot;:[]},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;full&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;rounded-full wp-block-ska-text ska-text&quot;&gt;A primary button&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ska-element\">\n<h3 class=\"wp-block-heading\">Squircle<\/h3>\n\n\n\n<p><code>[corner-shape:squircle] rounded-3xl<\/code><\/p>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" class=\"[corner-shape:squircle] rounded-3xl wp-block-ska-text ska-text ska-preset--ska-theme--button ska-preset--ska-theme--primary-button\">A primary button<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;[corner-shape:squircle] rounded-3xl&quot;,&quot;css&quot;:&quot;.\\u005c[corner-shape\\u005c:squircle\\u005c]{corner-shape:squircle}.rounded-3xl{border-radius:var(--radius-3xl)}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true},{&quot;id&quot;:&quot;ska-theme--primary-button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;},&quot;skaBlocksVariables&quot;:{&quot;record&quot;:{&quot;corner-shape&quot;:{&quot;value&quot;:&quot;squircle&quot;,&quot;type&quot;:&quot;&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;3xl&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;[corner-shape:squircle] rounded-3xl wp-block-ska-text ska-text&quot;&gt;A primary button&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ska-element\">\n<h3 class=\"wp-block-heading\">Notch<\/h3>\n\n\n\n<p><code>[corner-shape:notch] rounded-sm<\/code><\/p>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" class=\"[corner-shape:notch] rounded-sm wp-block-ska-text ska-text ska-preset--ska-theme--button ska-preset--ska-theme--primary-button\">A primary button<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;[corner-shape:notch] rounded-sm&quot;,&quot;css&quot;:&quot;.\\u005c[corner-shape\\u005c:notch\\u005c]{corner-shape:notch}.rounded-sm{border-radius:var(--radius-sm)}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true},{&quot;id&quot;:&quot;ska-theme--primary-button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;},&quot;skaBlocksVariables&quot;:{&quot;record&quot;:{&quot;corner-shape&quot;:{&quot;value&quot;:&quot;notch&quot;,&quot;type&quot;:&quot;&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;sm&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;[corner-shape:notch] rounded-sm wp-block-ska-text ska-text&quot;&gt;A primary button&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ska-element\">\n<h3 class=\"wp-block-heading\">Scoop<\/h3>\n\n\n\n<p><code>[corner-shape:scoop] rounded-md<\/code><\/p>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" class=\"[corner-shape:scoop] rounded-md wp-block-ska-text ska-text ska-preset--ska-theme--button ska-preset--ska-theme--primary-button\">A primary button<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;[corner-shape:scoop] rounded-md&quot;,&quot;css&quot;:&quot;.\\u005c[corner-shape\\u005c:scoop\\u005c]{corner-shape:scoop}.rounded-md{border-radius:var(--radius-md)}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true},{&quot;id&quot;:&quot;ska-theme--primary-button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;},&quot;skaBlocksVariables&quot;:{&quot;record&quot;:{&quot;corner-shape&quot;:{&quot;value&quot;:&quot;scoop&quot;,&quot;type&quot;:&quot;&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;md&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;[corner-shape:scoop] rounded-md wp-block-ska-text ska-text&quot;&gt;A primary button&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ska-element\">\n<h3 class=\"wp-block-heading\">Bevel<\/h3>\n\n\n\n<p><code>[corner-shape:bevel] rounded-lg<\/code><\/p>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" class=\"[corner-shape:bevel] rounded-lg wp-block-ska-text ska-text ska-preset--ska-theme--button ska-preset--ska-theme--primary-button\">A primary button<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;[corner-shape:bevel] rounded-lg&quot;,&quot;css&quot;:&quot;.\\u005c[corner-shape\\u005c:bevel\\u005c]{corner-shape:bevel}.rounded-lg{border-radius:var(--radius-lg)}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true},{&quot;id&quot;:&quot;ska-theme--primary-button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;},&quot;skaBlocksVariables&quot;:{&quot;record&quot;:{&quot;corner-shape&quot;:{&quot;value&quot;:&quot;bevel&quot;,&quot;type&quot;:&quot;&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;lg&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;[corner-shape:bevel] rounded-lg wp-block-ska-text ska-text&quot;&gt;A primary button&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ska-element\">\n<h3 class=\"wp-block-heading\">Superellipse<\/h3>\n\n\n\n<p><code>[corner-shape:superellipse(-0.5)] hover:[corner-shape:superellipse(-1.5)] px-9 rounded-3xl<\/code><\/p>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" class=\"[corner-shape:superellipse(-0.5)] hover:[corner-shape:superellipse(-1.5)] px-9 rounded-3xl wp-block-ska-text ska-text ska-preset--ska-theme--button ska-preset--ska-theme--primary-button\">A primary button<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;[corner-shape:superellipse(-0.5)] hover:[corner-shape:superellipse(-1.5)] px-9 rounded-3xl&quot;,&quot;css&quot;:&quot;.\\u005c[corner-shape\\u005c:superellipse\\u005c(-0\\u005c.5\\u005c)\\u005c]{corner-shape:superellipse(-.5)}@media (hover:hover){.hover\\u005c:\\u005c[corner-shape\\u005c:superellipse\\u005c(-1\\u005c.5\\u005c)\\u005c]:hover{corner-shape:superellipse(-1.5)}}.px-9{padding-inline:var(--spacing-9)}.rounded-3xl{border-radius:var(--radius-3xl)}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true},{&quot;id&quot;:&quot;ska-theme--primary-button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;},&quot;skaBlocksVariables&quot;:{&quot;record&quot;:{&quot;corner-shape&quot;:{&quot;value&quot;:&quot;superellipse(-0.5)&quot;,&quot;type&quot;:&quot;&quot;},&quot;hover:corner-shape&quot;:{&quot;value&quot;:&quot;superellipse(-1.5)&quot;,&quot;type&quot;:&quot;&quot;}}},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;9&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;3xl&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;[corner-shape:superellipse(-0.5)] hover:[corner-shape:superellipse(-1.5)] px-9 rounded-3xl wp-block-ska-text ska-text&quot;&gt;A primary button&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ska-element\">\n<h3 class=\"wp-block-heading\">Abomination<\/h3>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a href=\"#\" x-on:click=\"$dispatch('ska-toast', {type: 'error', content: 'Ow, it hurts!'})\" class=\"[corner-top-left-shape:bevel] [corner-top-right-shape:notch] [corner-bottom-right-shape:scoop] [corner-bottom-left-shape:squircle] text-xl rounded-tl-3xl rounded-tr-md rounded-br-xl rounded-bl-3xl hover:rounded-tl-xs hover:rounded-tr-2xl hover:rounded-br-3xl hover:rounded-bl-md transition-all wp-block-ska-text ska-text ska-preset--ska-theme--button ska-preset--ska-theme--primary-button\">A primary button<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;[corner-top-left-shape:bevel] [corner-top-right-shape:notch] [corner-bottom-right-shape:scoop] [corner-bottom-left-shape:squircle] text-xl rounded-tl-3xl rounded-tr-md rounded-br-xl rounded-bl-3xl hover:rounded-tl-xs hover:rounded-tr-2xl hover:rounded-br-3xl hover:rounded-bl-md transition-all&quot;,&quot;css&quot;:&quot;.\\u005c[corner-top-left-shape\\u005c:bevel\\u005c]{corner-top-left-shape:bevel}.\\u005c[corner-top-right-shape\\u005c:notch\\u005c]{corner-top-right-shape:notch}.\\u005c[corner-bottom-right-shape\\u005c:scoop\\u005c]{corner-bottom-right-shape:scoop}.\\u005c[corner-bottom-left-shape\\u005c:squircle\\u005c]{corner-bottom-left-shape:squircle}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.rounded-tl-3xl{border-top-left-radius:var(--radius-3xl)}.rounded-tr-md{border-top-right-radius:var(--radius-md)}.rounded-br-xl{border-bottom-right-radius:var(--radius-xl)}.rounded-bl-3xl{border-bottom-left-radius:var(--radius-3xl)}@media (hover:hover){.hover\\u005c:rounded-tl-xs:hover{border-top-left-radius:var(--radius-xs)}}@media (hover:hover){.hover\\u005c:rounded-tr-2xl:hover{border-top-right-radius:var(--radius-2xl)}}@media (hover:hover){.hover\\u005c:rounded-br-3xl:hover{border-bottom-right-radius:var(--radius-3xl)}}@media (hover:hover){.hover\\u005c:rounded-bl-md:hover{border-bottom-left-radius:var(--radius-md)}}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true},{&quot;id&quot;:&quot;ska-theme--primary-button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;},&quot;skaBlocksAttributes&quot;:{&quot;record&quot;:{&quot;x-on:click&quot;:&quot;$dispatch(&#039;ska-toast&#039;, {type: &#039;error&#039;, content: &#039;Ow, it hurts!&#039;})&quot;}},&quot;skaBlocksVariables&quot;:{&quot;record&quot;:{&quot;corner-top-left-shape&quot;:{&quot;value&quot;:&quot;bevel&quot;,&quot;type&quot;:&quot;&quot;},&quot;corner-top-right-shape&quot;:{&quot;value&quot;:&quot;notch&quot;,&quot;type&quot;:&quot;&quot;},&quot;corner-bottom-right-shape&quot;:{&quot;value&quot;:&quot;scoop&quot;,&quot;type&quot;:&quot;&quot;},&quot;corner-bottom-left-shape&quot;:{&quot;value&quot;:&quot;squircle&quot;,&quot;type&quot;:&quot;&quot;}}},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;xl&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;tl&quot;:&quot;3xl&quot;,&quot;tr&quot;:&quot;md&quot;,&quot;br&quot;:&quot;xl&quot;,&quot;bl&quot;:&quot;3xl&quot;},&quot;hover&quot;:{&quot;@&quot;:&quot;&quot;,&quot;tl&quot;:&quot;xs&quot;,&quot;tr&quot;:&quot;2xl&quot;,&quot;br&quot;:&quot;3xl&quot;,&quot;bl&quot;:&quot;md&quot;}},&quot;t&quot;:&quot;corners&quot;},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;all&quot;}}}} --&gt;\n&lt;a href=&quot;#&quot; x-on:click=&quot;$dispatch(&#039;ska-toast&#039;, {type: &#039;error&#039;, content: &#039;Ow, it hurts!&#039;})&quot; class=&quot;[corner-top-left-shape:bevel] [corner-top-right-shape:notch] [corner-bottom-right-shape:scoop] [corner-bottom-left-shape:squircle] text-xl rounded-tl-3xl rounded-tr-md rounded-br-xl rounded-bl-3xl hover:rounded-tl-xs hover:rounded-tr-2xl hover:rounded-br-3xl hover:rounded-bl-md transition-all wp-block-ska-text ska-text&quot;&gt;A primary button&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Buttons in different contexts<\/h2>\n\n\n\n<p class=\"lead\">The age-old CSS question: <em>&#8220;How do you center this thing?&#8221;<\/em>&#8230;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Buttons in regular pages<\/h3>\n\n\n\n<a aria-label=\"View image in full screen\" data-pswp-height=\"273\" data-pswp-width=\"1509\" data-ska-pswp=\"ska-pswp-2\" href=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-38.png\" class=\"block border wp-block-ska-image image\"><img decoding=\"async\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-38-1024x185.png\" alt=\"A button in a WordPress page using the Block Editor\" width=\"1024\" height=\"185\" loading=\"lazy\" class=\"w-full h-full object-cover rounded-[inherit] aspect-[inherit]\" srcset=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-38-1024x185.png 1024w, https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-38-300x54.png 300w, https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-38-768x139.png 768w, https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-38.png 1509w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a>\n\n\n\n<p>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&#8217;s layout is grid-based &#8211; 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&#8217; <code>.alignwide<\/code> class it spans even more &#8220;columns&#8221;, giving it a &#8220;breakout&#8221; effect, and <code>.alignfull<\/code> 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.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Aligning or centering<\/h4>\n\n\n\n<p>This is where being able to add Tailwind classes to everything comes in handy once again &#8211; add the <code>place-self-start<\/code> class to the button, and it does what it says on the tin &#8211; places itself to the start:<\/p>\n\n\n\n<a aria-label=\"View image in full screen\" data-pswp-height=\"204\" data-pswp-width=\"888\" data-ska-pswp=\"ska-pswp-3\" href=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-39.png\" class=\"block border wp-block-ska-image image\"><img decoding=\"async\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-39.png\" alt=\"A button using justify-self-start Tailwind class in the block editor\" width=\"888\" height=\"204\" loading=\"lazy\" class=\"w-full h-full object-cover rounded-[inherit] aspect-[inherit]\" srcset=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-39.png 888w, https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-39-300x69.png 300w, https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-39-768x176.png 768w\" sizes=\"(max-width: 888px) 100vw, 888px\" \/><\/a>\n\n\n\n<p>Change it to <code>place-self-center<\/code> and it goes to the center &#8211; no wrappers needed:<\/p>\n\n\n\n<a aria-label=\"View image in full screen\" data-pswp-height=\"207\" data-pswp-width=\"888\" data-ska-pswp=\"ska-pswp-4\" href=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-40.png\" class=\"block border wp-block-ska-image image\"><img decoding=\"async\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-40.png\" alt=\"A button using justify-self-center Tailwind class in the block editor\" width=\"888\" height=\"207\" loading=\"lazy\" class=\"w-full h-full object-cover rounded-[inherit] aspect-[inherit]\" srcset=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-40.png 888w, https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-40-300x70.png 300w, https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-40-768x179.png 768w\" sizes=\"(max-width: 888px) 100vw, 888px\" \/><\/a>\n\n\n\n<p>This doesn&#8217;t just apply to buttons &#8211; any root level element can be aligned like that. Using <code>place-self-*<\/code> is a shorthand that works on both axes, meaning it&#8217;s the same as using <code>justify-self-*<\/code> and <code>align-self-*<\/code> together &#8211; you could also only use the <code>justify-self-*<\/code> class &#8211; in this case they have the same result.<\/p>\n\n\n\n<p>Alternatively, you can wrap button in another element:<\/p>\n\n\n\n<a aria-label=\"View image in full screen\" data-pswp-height=\"260\" data-pswp-width=\"517\" data-ska-pswp=\"ska-pswp-5\" href=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-41.png\" class=\"inline-block! border wp-block-ska-image image\"><img decoding=\"async\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-41.png\" alt=\"Wrapping a button in an element using the Grouping function from block editor toolbar\" width=\"517\" height=\"260\" loading=\"lazy\" class=\"w-full h-full object-cover rounded-[inherit] aspect-[inherit]\" srcset=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-41.png 517w, https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-41-300x151.png 300w\" sizes=\"(max-width: 517px) 100vw, 517px\" \/><\/a>\n\n\n\n<p>&#8230;producing a <code>&lt;div&gt; -&gt; &lt;a&gt;<\/code>, where <code>&lt;div&gt;<\/code> is now the element that spans full width, and the button flows naturally inside of it:<\/p>\n\n\n\n<a aria-label=\"View image in full screen\" data-pswp-height=\"276\" data-pswp-width=\"684\" data-ska-pswp=\"ska-pswp-6\" href=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-42.png\" class=\"max-w-xl border wp-block-ska-image image\"><img decoding=\"async\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-42.png\" alt=\"Button block wrapped in an Element block\" width=\"684\" height=\"276\" loading=\"lazy\" srcset=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-42.png 684w, https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-42-300x121.png 300w\" sizes=\"(max-width: 684px) 100vw, 684px\" \/><\/a>\n\n\n\n<p>Now you could add <code>text-center<\/code> to the <code>&lt;div&gt;<\/code> to center the button, or give the <code>&lt;div&gt;<\/code> a different layout such as <code>flex<\/code>, <code>block<\/code> or <code>grid<\/code> using Tailwind classes and align based on how these display methods function.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Buttons in blog posts<\/h3>\n\n\n\n<p>While powerful, this <code>place-self-*<\/code> mumbo-jumbo is probably too advanced for the average user who&#8217;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 <code>place-self-start<\/code> already applied to buttons, specifically using the <code>prose-ska-button<\/code> variant, which targets <code>.ska-preset--ska-theme--button<\/code> class name in prose context (but excluding <code>.not-prose<\/code> descendants), which is applied whenever you use the Button preset.<\/p>\n\n\n\n<a aria-label=\"View image in full screen\" data-pswp-height=\"295\" data-pswp-width=\"888\" data-ska-pswp=\"ska-pswp-7\" href=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-43.png\" class=\"block border wp-block-ska-image image\"><img decoding=\"async\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-43.png\" alt=\"A button in a blog post context\" width=\"888\" height=\"295\" loading=\"lazy\" class=\"w-full h-full object-cover rounded-[inherit] aspect-[inherit]\" srcset=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-43.png 888w, https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-43-300x100.png 300w, https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-43-768x255.png 768w\" sizes=\"(max-width: 888px) 100vw, 888px\" \/><\/a>\n\n\n\n<p>You can still apply <code>place-self-center<\/code> to the button (may need the <code>!<\/code> important modifier for specificity) or use any other method of alignment.<\/p>\n\n\n\n<p>The button also has bottom margin (<code>mb-(--spacing-prose)<\/code>) to keep the spacing consistent for any content that may come after it. If you don&#8217;t want bottom margin you can either use the <code>mb-0!<\/code> class which overrides the margin or the <code>not-prose<\/code> 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.<\/p>\n\n\n\n<div role=\"figure\" class=\"inline-block border wp-block-ska-image alignright image\"><img decoding=\"async\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-44.png\" alt=\"Editing ska-theme prose preset's prose-ska-button selector\" width=\"267\" height=\"571\" loading=\"lazy\" srcset=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-44.png 267w, https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-44-140x300.png 140w\" sizes=\"(max-width: 267px) 100vw, 267px\" \/><\/div>\n\n\n\n<p>As is typical with ska-theme, it is not hard-coded and set in stone &#8211; you can tailor all that functionality to your specific needs by editing the <code>prose-ska-button<\/code> <a href=\"https:\/\/ska-blocks.com\/docs\/selectors\/\" data-type=\"post\" data-id=\"44\">selector<\/a> 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 <a href=\"https:\/\/ska-blocks.com\/docs\/presets\/\" data-type=\"post\" data-id=\"46\">preset<\/a> 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.<br>Being able to <em>change<\/em> the functionality rather than override it with additional custom CSS ensures that your site doesn&#8217;t become bloated with unused CSS over time &#8211; you can even <em>remove<\/em> things that are not necessary for your use case.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Every website needs a button. This documentation gives an overview of the &#8220;Button&#8221; presets that come with ska-theme, provides copy-pastable examples of basic and advanced buttons and details about their usage in various contexts.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[5],"class_list":["post-32","post","type-post","status-publish","format-standard","hentry","category-ska-theme","tag-ui"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/32","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=32"}],"version-history":[{"count":21,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/32\/revisions"}],"predecessor-version":[{"id":625,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/32\/revisions\/625"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=32"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=32"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}