[{"data":1,"prerenderedAt":2443},["ShallowReactive",2],{"\u002Farticles\u002Fnuxt-ui-custom-button-variants":3,"\u002Farticles\u002Fnuxt-ui-custom-button-variants-surround":2437},{"id":4,"title":5,"author":6,"body":7,"date":2421,"description":13,"draft":2422,"extension":2423,"image":6,"lastmod":2421,"meta":2424,"minRead":6,"navigation":227,"path":2433,"seo":2434,"stem":2435,"__hash__":2436},"articles\u002Farticles\u002Fnuxt-ui-custom-button-variants.md","Adding Custom Button Variants in Nuxt UI",null,{"type":8,"value":9,"toc":2402},"minimark",[10,14,21,29,34,53,60,64,67,80,84,87,111,114,118,125,461,466,517,527,531,537,801,805,861,865,868,1211,1214,1366,1370,1373,1597,1601,1604,1607,1900,1905,2169,2172,2245,2251,2275,2279,2321,2325,2336,2352,2356,2362,2365,2369,2394,2398],[11,12,13],"p",{},"Learn how to extend Nuxt UI's button component with custom variants like a stunning skew animation effect. We'll explore app.config.ts configuration, CSS pseudo-elements, and compound variants to create unique button styles that match your brand.",[11,15,16,20],{},[17,18,19],"strong",{},"Here's what we'll be building"," - try hovering over the buttons:",[22,23,26],"component-frame",{"description":24,"title":25},"A showcase of custom button animations built with Nuxt UI and CSS pseudo-elements.","Skew Button Variants",[27,28],"button-skew-demo",{},[30,31,33],"h2",{"id":32},"the-challenge","The Challenge",[11,35,36,37,41,42,41,45,48,49,52],{},"Nuxt UI provides excellent built-in button variants like ",[38,39,40],"code",{},"solid",", ",[38,43,44],{},"outline",[38,46,47],{},"soft",", and ",[38,50,51],{},"ghost",". But what if you want something more unique? Something that makes your buttons stand out with eye-catching animations?",[11,54,55,56,59],{},"In this tutorial, I'll show you how I created a custom ",[17,57,58],{},"skew"," button variant that features an animated background that sweeps across the button on hover - a signature effect for my portfolio.",[30,61,63],{"id":62},"prerequisites","Prerequisites",[11,65,66],{},"Before we start, make sure you have:",[68,69,70,74,77],"ul",{},[71,72,73],"li",{},"Nuxt project with Nuxt UI v4 installed",[71,75,76],{},"Basic understanding of Tailwind CSS",[71,78,79],{},"Familiarity with CSS pseudo-elements",[30,81,83],{"id":82},"the-approach","The Approach",[11,85,86],{},"Creating a custom button variant in Nuxt UI involves three steps:",[88,89,90,96,105],"ol",{},[71,91,92,95],{},[17,93,94],{},"Define the CSS animation"," in your global stylesheet",[71,97,98,101,102],{},[17,99,100],{},"Register the variant"," in ",[38,103,104],{},"app.config.ts",[71,106,107,110],{},[17,108,109],{},"Add compound variants"," for different color options",[11,112,113],{},"Let's dive in!",[30,115,117],{"id":116},"step-1-the-css-animation","Step 1: The CSS Animation",[11,119,120,121,124],{},"First, we need to create the skew animation using CSS pseudo-elements. Add this to your ",[38,122,123],{},"assets\u002Fcss\u002Fmain.css",":",[126,127,133],"pre",{"className":128,"code":129,"filename":130,"language":131,"meta":132,"style":132},"language-css shiki shiki-themes material-theme-lighter one-light one-dark-pro","@layer base {\n  \u002F* Skew Button Animation *\u002F\n  .btn-skew {\n    position: relative;\n    overflow: hidden;\n    z-index: 0;\n  }\n\n  .btn-skew::before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: -25px;\n    height: 100%;\n    width: 0%;\n    background-color: var(--ui-primary);\n    transform: skewX(35deg);\n    z-index: -1;\n    transition: width 500ms ease-out;\n  }\n\n  .btn-skew:hover::before {\n    width: 150%;\n  }\n}\n","main.css","css","",[38,134,135,152,159,173,189,202,216,222,229,246,260,272,284,301,317,331,353,374,386,408,413,418,436,450,455],{"__ignoreMap":132},[136,137,140,144,148],"span",{"class":138,"line":139},"line",1,[136,141,143],{"class":142},"sQsOY","@layer",[136,145,147],{"class":146},"sM89C"," base ",[136,149,151],{"class":150},"sB4Xn","{\n",[136,153,155],{"class":138,"line":154},2,[136,156,158],{"class":157},"seacL","  \u002F* Skew Button Animation *\u002F\n",[136,160,162,166,170],{"class":138,"line":161},3,[136,163,165],{"class":164},"svDm9","  .",[136,167,169],{"class":168},"s6wAS","btn-skew",[136,171,172],{"class":150}," {\n",[136,174,176,180,182,186],{"class":138,"line":175},4,[136,177,179],{"class":178},"sGRuu","    position",[136,181,124],{"class":150},[136,183,185],{"class":184},"sngOx"," relative",[136,187,188],{"class":150},";\n",[136,190,192,195,197,200],{"class":138,"line":191},5,[136,193,194],{"class":178},"    overflow",[136,196,124],{"class":150},[136,198,199],{"class":184}," hidden",[136,201,188],{"class":150},[136,203,205,208,210,214],{"class":138,"line":204},6,[136,206,207],{"class":178},"    z-index",[136,209,124],{"class":150},[136,211,213],{"class":212},"sriKn"," 0",[136,215,188],{"class":150},[136,217,219],{"class":138,"line":218},7,[136,220,221],{"class":150},"  }\n",[136,223,225],{"class":138,"line":224},8,[136,226,228],{"emptyLinePlaceholder":227},true,"\n",[136,230,232,234,236,240,244],{"class":138,"line":231},9,[136,233,165],{"class":164},[136,235,169],{"class":168},[136,237,239],{"class":238},"sst0O","::",[136,241,243],{"class":242},"sSxop","before",[136,245,172],{"class":150},[136,247,249,252,254,258],{"class":138,"line":248},10,[136,250,251],{"class":178},"    content",[136,253,124],{"class":150},[136,255,257],{"class":256},"sVH1b"," \"\"",[136,259,188],{"class":150},[136,261,263,265,267,270],{"class":138,"line":262},11,[136,264,179],{"class":178},[136,266,124],{"class":150},[136,268,269],{"class":184}," absolute",[136,271,188],{"class":150},[136,273,275,278,280,282],{"class":138,"line":274},12,[136,276,277],{"class":178},"    top",[136,279,124],{"class":150},[136,281,213],{"class":212},[136,283,188],{"class":150},[136,285,287,290,292,295,299],{"class":138,"line":286},13,[136,288,289],{"class":178},"    left",[136,291,124],{"class":150},[136,293,294],{"class":212}," -25",[136,296,298],{"class":297},"sLhkd","px",[136,300,188],{"class":150},[136,302,304,307,309,312,315],{"class":138,"line":303},14,[136,305,306],{"class":178},"    height",[136,308,124],{"class":150},[136,310,311],{"class":212}," 100",[136,313,314],{"class":297},"%",[136,316,188],{"class":150},[136,318,320,323,325,327,329],{"class":138,"line":319},15,[136,321,322],{"class":178},"    width",[136,324,124],{"class":150},[136,326,213],{"class":212},[136,328,314],{"class":297},[136,330,188],{"class":150},[136,332,334,337,339,343,346,350],{"class":138,"line":333},16,[136,335,336],{"class":178},"    background-color",[136,338,124],{"class":150},[136,340,342],{"class":341},"sTDPv"," var",[136,344,345],{"class":150},"(",[136,347,349],{"class":348},"s8dPH","--ui-primary",[136,351,352],{"class":150},");\n",[136,354,356,359,361,364,366,369,372],{"class":138,"line":355},17,[136,357,358],{"class":178},"    transform",[136,360,124],{"class":150},[136,362,363],{"class":341}," skewX",[136,365,345],{"class":150},[136,367,368],{"class":212},"35",[136,370,371],{"class":297},"deg",[136,373,352],{"class":150},[136,375,377,379,381,384],{"class":138,"line":376},18,[136,378,207],{"class":178},[136,380,124],{"class":150},[136,382,383],{"class":212}," -1",[136,385,188],{"class":150},[136,387,389,392,394,397,400,403,406],{"class":138,"line":388},19,[136,390,391],{"class":178},"    transition",[136,393,124],{"class":150},[136,395,396],{"class":146}," width ",[136,398,399],{"class":212},"500",[136,401,402],{"class":297},"ms",[136,404,405],{"class":184}," ease-out",[136,407,188],{"class":150},[136,409,411],{"class":138,"line":410},20,[136,412,221],{"class":150},[136,414,416],{"class":138,"line":415},21,[136,417,228],{"emptyLinePlaceholder":227},[136,419,421,423,425,427,430,432,434],{"class":138,"line":420},22,[136,422,165],{"class":164},[136,424,169],{"class":168},[136,426,124],{"class":238},[136,428,429],{"class":242},"hover",[136,431,239],{"class":238},[136,433,243],{"class":242},[136,435,172],{"class":150},[136,437,439,441,443,446,448],{"class":138,"line":438},23,[136,440,322],{"class":178},[136,442,124],{"class":150},[136,444,445],{"class":212}," 150",[136,447,314],{"class":297},[136,449,188],{"class":150},[136,451,453],{"class":138,"line":452},24,[136,454,221],{"class":150},[136,456,458],{"class":138,"line":457},25,[136,459,460],{"class":150},"}\n",[462,463,465],"h3",{"id":464},"how-it-works","How It Works",[88,467,468,480,489,497,509],{},[71,469,470,479],{},[17,471,472,475,476],{},[38,473,474],{},"position: relative"," & ",[38,477,478],{},"overflow: hidden",": Creates a containing box for the pseudo-element and clips any overflow",[71,481,482,488],{},[17,483,484,487],{},[38,485,486],{},"::before"," pseudo-element",": Creates an invisible layer behind the button",[71,490,491,496],{},[17,492,493],{},[38,494,495],{},"transform: skewX(35deg)",": Gives the sliding background its angled edge",[71,498,499,508],{},[17,500,501,504,505],{},[38,502,503],{},"width: 0%"," → ",[38,506,507],{},"width: 150%",": Animates from invisible to fully covering on hover",[71,510,511,516],{},[17,512,513],{},[38,514,515],{},"var(--ui-primary)",": Uses Nuxt UI's theme color variable",[518,519,520],"note",{},[11,521,522,523,526],{},"The ",[38,524,525],{},"z-index: -1"," on the pseudo-element ensures the animated background stays behind the button text.",[30,528,530],{"id":529},"step-2-register-the-variant","Step 2: Register the Variant",[11,532,533,534,536],{},"Now we register our custom variant in ",[38,535,104],{},". This is where Nuxt UI's extensibility shines:",[538,539,540],"code-collapse",{},[126,541,545],{"className":542,"code":543,"filename":104,"language":544,"meta":132,"style":132},"language-typescript shiki shiki-themes material-theme-lighter one-light one-dark-pro","export default defineAppConfig({\n  ui: {\n    colors: {\n      primary: \"red\",\n      neutral: \"zinc\",\n    },\n    button: {\n      variants: {\n        variant: {\n          skew: {\n            base: [\n              \"btn-skew\",\n              \"border border-neutral-300 dark:border-neutral-700\",\n              \"bg-default\",\n              \"transition-all duration-300\",\n              \"hover:border-primary\",\n              \"hover:text-white dark:hover:text-default\",\n              \"disabled:cursor-not-allowed\",\n              \"disabled:opacity-50\",\n            ],\n          },\n        },\n      },\n    },\n  },\n});\n","typescript",[38,546,547,564,575,584,604,620,625,634,643,652,661,671,682,693,704,715,726,737,748,759,766,771,776,781,785,790],{"__ignoreMap":132},[136,548,549,552,556,560,562],{"class":138,"line":139},[136,550,551],{"class":142},"export",[136,553,555],{"class":554},"sH50Z"," default",[136,557,559],{"class":558},"spnjr"," defineAppConfig",[136,561,345],{"class":146},[136,563,151],{"class":150},[136,565,566,570,573],{"class":138,"line":154},[136,567,569],{"class":568},"su13H","  ui",[136,571,124],{"class":572},"saKOp",[136,574,172],{"class":150},[136,576,577,580,582],{"class":138,"line":161},[136,578,579],{"class":568},"    colors",[136,581,124],{"class":572},[136,583,172],{"class":150},[136,585,586,589,591,594,598,601],{"class":138,"line":175},[136,587,588],{"class":568},"      primary",[136,590,124],{"class":572},[136,592,593],{"class":256}," \"",[136,595,597],{"class":596},"spZWa","red",[136,599,600],{"class":256},"\"",[136,602,603],{"class":150},",\n",[136,605,606,609,611,613,616,618],{"class":138,"line":191},[136,607,608],{"class":568},"      neutral",[136,610,124],{"class":572},[136,612,593],{"class":256},[136,614,615],{"class":596},"zinc",[136,617,600],{"class":256},[136,619,603],{"class":150},[136,621,622],{"class":138,"line":204},[136,623,624],{"class":150},"    },\n",[136,626,627,630,632],{"class":138,"line":218},[136,628,629],{"class":568},"    button",[136,631,124],{"class":572},[136,633,172],{"class":150},[136,635,636,639,641],{"class":138,"line":224},[136,637,638],{"class":568},"      variants",[136,640,124],{"class":572},[136,642,172],{"class":150},[136,644,645,648,650],{"class":138,"line":231},[136,646,647],{"class":568},"        variant",[136,649,124],{"class":572},[136,651,172],{"class":150},[136,653,654,657,659],{"class":138,"line":248},[136,655,656],{"class":568},"          skew",[136,658,124],{"class":572},[136,660,172],{"class":150},[136,662,663,666,668],{"class":138,"line":262},[136,664,665],{"class":568},"            base",[136,667,124],{"class":572},[136,669,670],{"class":146}," [\n",[136,672,673,676,678,680],{"class":138,"line":274},[136,674,675],{"class":256},"              \"",[136,677,169],{"class":596},[136,679,600],{"class":256},[136,681,603],{"class":150},[136,683,684,686,689,691],{"class":138,"line":286},[136,685,675],{"class":256},[136,687,688],{"class":596},"border border-neutral-300 dark:border-neutral-700",[136,690,600],{"class":256},[136,692,603],{"class":150},[136,694,695,697,700,702],{"class":138,"line":303},[136,696,675],{"class":256},[136,698,699],{"class":596},"bg-default",[136,701,600],{"class":256},[136,703,603],{"class":150},[136,705,706,708,711,713],{"class":138,"line":319},[136,707,675],{"class":256},[136,709,710],{"class":596},"transition-all duration-300",[136,712,600],{"class":256},[136,714,603],{"class":150},[136,716,717,719,722,724],{"class":138,"line":333},[136,718,675],{"class":256},[136,720,721],{"class":596},"hover:border-primary",[136,723,600],{"class":256},[136,725,603],{"class":150},[136,727,728,730,733,735],{"class":138,"line":355},[136,729,675],{"class":256},[136,731,732],{"class":596},"hover:text-white dark:hover:text-default",[136,734,600],{"class":256},[136,736,603],{"class":150},[136,738,739,741,744,746],{"class":138,"line":376},[136,740,675],{"class":256},[136,742,743],{"class":596},"disabled:cursor-not-allowed",[136,745,600],{"class":256},[136,747,603],{"class":150},[136,749,750,752,755,757],{"class":138,"line":388},[136,751,675],{"class":256},[136,753,754],{"class":596},"disabled:opacity-50",[136,756,600],{"class":256},[136,758,603],{"class":150},[136,760,761,764],{"class":138,"line":410},[136,762,763],{"class":146},"            ]",[136,765,603],{"class":150},[136,767,768],{"class":138,"line":415},[136,769,770],{"class":150},"          },\n",[136,772,773],{"class":138,"line":420},[136,774,775],{"class":150},"        },\n",[136,777,778],{"class":138,"line":438},[136,779,780],{"class":150},"      },\n",[136,782,783],{"class":138,"line":452},[136,784,624],{"class":150},[136,786,787],{"class":138,"line":457},[136,788,789],{"class":150},"  },\n",[136,791,793,796,799],{"class":138,"line":792},26,[136,794,795],{"class":150},"}",[136,797,798],{"class":146},")",[136,800,188],{"class":150},[462,802,804],{"id":803},"breaking-down-the-configuration","Breaking Down the Configuration",[68,806,807,815,823,830,839,846,853],{},[71,808,809,814],{},[17,810,811],{},[38,812,813],{},"variants.variant.skew",": Defines a new variant called \"skew\"",[71,816,817,822],{},[17,818,819],{},[38,820,821],{},"base",": An array of Tailwind classes applied by default",[71,824,825,829],{},[17,826,827],{},[38,828,169],{},": Our custom CSS class with the animation",[71,831,832,838],{},[17,833,834,837],{},[38,835,836],{},"border"," classes",": Creates a visible border",[71,840,841,845],{},[17,842,843],{},[38,844,699],{},": Uses the default background color",[71,847,848,852],{},[17,849,850],{},[38,851,721],{},": Border turns primary color on hover",[71,854,855,860],{},[17,856,857],{},[38,858,859],{},"hover:text-white",": Text turns white on hover (matching the primary background)",[30,862,864],{"id":863},"step-3-add-compound-variants-for-colors","Step 3: Add Compound Variants for Colors",[11,866,867],{},"To support different colors with our skew variant, we use compound variants:",[538,869,870],{},[126,871,873],{"className":542,"code":872,"filename":104,"language":544,"meta":132,"style":132},"export default defineAppConfig({\n  ui: {\n    button: {\n      \u002F\u002F ... variants from above\n      compoundVariants: [\n        {\n          variant: \"skew\",\n          color: \"primary\",\n          class: \"btn-skew\",\n        },\n        {\n          variant: \"skew\",\n          color: \"success\",\n          class: \"btn-skew btn-skew-success hover:border-success\",\n        },\n        {\n          variant: \"skew\",\n          color: \"info\",\n          class: \"btn-skew btn-skew-info hover:border-info\",\n        },\n        {\n          variant: \"skew\",\n          color: \"warning\",\n          class: \"btn-skew btn-skew-warning hover:border-warning\",\n        },\n        {\n          variant: \"skew\",\n          color: \"neutral\",\n          class: \"btn-skew btn-skew-neutral hover:border-neutral\",\n        },\n      ],\n    },\n  },\n});\n",[38,874,875,887,895,903,908,917,922,937,953,968,972,976,990,1005,1020,1024,1028,1042,1057,1072,1076,1080,1094,1109,1124,1128,1132,1147,1163,1179,1184,1192,1197,1202],{"__ignoreMap":132},[136,876,877,879,881,883,885],{"class":138,"line":139},[136,878,551],{"class":142},[136,880,555],{"class":554},[136,882,559],{"class":558},[136,884,345],{"class":146},[136,886,151],{"class":150},[136,888,889,891,893],{"class":138,"line":154},[136,890,569],{"class":568},[136,892,124],{"class":572},[136,894,172],{"class":150},[136,896,897,899,901],{"class":138,"line":161},[136,898,629],{"class":568},[136,900,124],{"class":572},[136,902,172],{"class":150},[136,904,905],{"class":138,"line":175},[136,906,907],{"class":157},"      \u002F\u002F ... variants from above\n",[136,909,910,913,915],{"class":138,"line":191},[136,911,912],{"class":568},"      compoundVariants",[136,914,124],{"class":572},[136,916,670],{"class":146},[136,918,919],{"class":138,"line":204},[136,920,921],{"class":150},"        {\n",[136,923,924,927,929,931,933,935],{"class":138,"line":218},[136,925,926],{"class":568},"          variant",[136,928,124],{"class":572},[136,930,593],{"class":256},[136,932,58],{"class":596},[136,934,600],{"class":256},[136,936,603],{"class":150},[136,938,939,942,944,946,949,951],{"class":138,"line":224},[136,940,941],{"class":568},"          color",[136,943,124],{"class":572},[136,945,593],{"class":256},[136,947,948],{"class":596},"primary",[136,950,600],{"class":256},[136,952,603],{"class":150},[136,954,955,958,960,962,964,966],{"class":138,"line":231},[136,956,957],{"class":568},"          class",[136,959,124],{"class":572},[136,961,593],{"class":256},[136,963,169],{"class":596},[136,965,600],{"class":256},[136,967,603],{"class":150},[136,969,970],{"class":138,"line":248},[136,971,775],{"class":150},[136,973,974],{"class":138,"line":262},[136,975,921],{"class":150},[136,977,978,980,982,984,986,988],{"class":138,"line":274},[136,979,926],{"class":568},[136,981,124],{"class":572},[136,983,593],{"class":256},[136,985,58],{"class":596},[136,987,600],{"class":256},[136,989,603],{"class":150},[136,991,992,994,996,998,1001,1003],{"class":138,"line":286},[136,993,941],{"class":568},[136,995,124],{"class":572},[136,997,593],{"class":256},[136,999,1000],{"class":596},"success",[136,1002,600],{"class":256},[136,1004,603],{"class":150},[136,1006,1007,1009,1011,1013,1016,1018],{"class":138,"line":303},[136,1008,957],{"class":568},[136,1010,124],{"class":572},[136,1012,593],{"class":256},[136,1014,1015],{"class":596},"btn-skew btn-skew-success hover:border-success",[136,1017,600],{"class":256},[136,1019,603],{"class":150},[136,1021,1022],{"class":138,"line":319},[136,1023,775],{"class":150},[136,1025,1026],{"class":138,"line":333},[136,1027,921],{"class":150},[136,1029,1030,1032,1034,1036,1038,1040],{"class":138,"line":355},[136,1031,926],{"class":568},[136,1033,124],{"class":572},[136,1035,593],{"class":256},[136,1037,58],{"class":596},[136,1039,600],{"class":256},[136,1041,603],{"class":150},[136,1043,1044,1046,1048,1050,1053,1055],{"class":138,"line":376},[136,1045,941],{"class":568},[136,1047,124],{"class":572},[136,1049,593],{"class":256},[136,1051,1052],{"class":596},"info",[136,1054,600],{"class":256},[136,1056,603],{"class":150},[136,1058,1059,1061,1063,1065,1068,1070],{"class":138,"line":388},[136,1060,957],{"class":568},[136,1062,124],{"class":572},[136,1064,593],{"class":256},[136,1066,1067],{"class":596},"btn-skew btn-skew-info hover:border-info",[136,1069,600],{"class":256},[136,1071,603],{"class":150},[136,1073,1074],{"class":138,"line":410},[136,1075,775],{"class":150},[136,1077,1078],{"class":138,"line":415},[136,1079,921],{"class":150},[136,1081,1082,1084,1086,1088,1090,1092],{"class":138,"line":420},[136,1083,926],{"class":568},[136,1085,124],{"class":572},[136,1087,593],{"class":256},[136,1089,58],{"class":596},[136,1091,600],{"class":256},[136,1093,603],{"class":150},[136,1095,1096,1098,1100,1102,1105,1107],{"class":138,"line":438},[136,1097,941],{"class":568},[136,1099,124],{"class":572},[136,1101,593],{"class":256},[136,1103,1104],{"class":596},"warning",[136,1106,600],{"class":256},[136,1108,603],{"class":150},[136,1110,1111,1113,1115,1117,1120,1122],{"class":138,"line":452},[136,1112,957],{"class":568},[136,1114,124],{"class":572},[136,1116,593],{"class":256},[136,1118,1119],{"class":596},"btn-skew btn-skew-warning hover:border-warning",[136,1121,600],{"class":256},[136,1123,603],{"class":150},[136,1125,1126],{"class":138,"line":457},[136,1127,775],{"class":150},[136,1129,1130],{"class":138,"line":792},[136,1131,921],{"class":150},[136,1133,1135,1137,1139,1141,1143,1145],{"class":138,"line":1134},27,[136,1136,926],{"class":568},[136,1138,124],{"class":572},[136,1140,593],{"class":256},[136,1142,58],{"class":596},[136,1144,600],{"class":256},[136,1146,603],{"class":150},[136,1148,1150,1152,1154,1156,1159,1161],{"class":138,"line":1149},28,[136,1151,941],{"class":568},[136,1153,124],{"class":572},[136,1155,593],{"class":256},[136,1157,1158],{"class":596},"neutral",[136,1160,600],{"class":256},[136,1162,603],{"class":150},[136,1164,1166,1168,1170,1172,1175,1177],{"class":138,"line":1165},29,[136,1167,957],{"class":568},[136,1169,124],{"class":572},[136,1171,593],{"class":256},[136,1173,1174],{"class":596},"btn-skew btn-skew-neutral hover:border-neutral",[136,1176,600],{"class":256},[136,1178,603],{"class":150},[136,1180,1182],{"class":138,"line":1181},30,[136,1183,775],{"class":150},[136,1185,1187,1190],{"class":138,"line":1186},31,[136,1188,1189],{"class":146},"      ]",[136,1191,603],{"class":150},[136,1193,1195],{"class":138,"line":1194},32,[136,1196,624],{"class":150},[136,1198,1200],{"class":138,"line":1199},33,[136,1201,789],{"class":150},[136,1203,1205,1207,1209],{"class":138,"line":1204},34,[136,1206,795],{"class":150},[136,1208,798],{"class":146},[136,1210,188],{"class":150},[11,1212,1213],{},"Now add the corresponding CSS for each color:",[126,1215,1217],{"className":128,"code":1216,"filename":130,"language":131,"meta":132,"style":132},"\u002F* Alternative skew variants with different colors *\u002F\n.btn-skew-success::before {\n  background-color: var(--ui-success);\n}\n\n.btn-skew-info::before {\n  background-color: var(--ui-info);\n}\n\n.btn-skew-warning::before {\n  background-color: var(--ui-warning);\n}\n\n.btn-skew-neutral::before {\n  background-color: var(--ui-bg-inverted);\n}\n",[38,1218,1219,1224,1238,1254,1258,1262,1275,1290,1294,1298,1311,1326,1330,1334,1347,1362],{"__ignoreMap":132},[136,1220,1221],{"class":138,"line":139},[136,1222,1223],{"class":157},"\u002F* Alternative skew variants with different colors *\u002F\n",[136,1225,1226,1229,1232,1234,1236],{"class":138,"line":154},[136,1227,1228],{"class":164},".",[136,1230,1231],{"class":168},"btn-skew-success",[136,1233,239],{"class":238},[136,1235,243],{"class":242},[136,1237,172],{"class":150},[136,1239,1240,1243,1245,1247,1249,1252],{"class":138,"line":161},[136,1241,1242],{"class":178},"  background-color",[136,1244,124],{"class":150},[136,1246,342],{"class":341},[136,1248,345],{"class":150},[136,1250,1251],{"class":348},"--ui-success",[136,1253,352],{"class":150},[136,1255,1256],{"class":138,"line":175},[136,1257,460],{"class":150},[136,1259,1260],{"class":138,"line":191},[136,1261,228],{"emptyLinePlaceholder":227},[136,1263,1264,1266,1269,1271,1273],{"class":138,"line":204},[136,1265,1228],{"class":164},[136,1267,1268],{"class":168},"btn-skew-info",[136,1270,239],{"class":238},[136,1272,243],{"class":242},[136,1274,172],{"class":150},[136,1276,1277,1279,1281,1283,1285,1288],{"class":138,"line":218},[136,1278,1242],{"class":178},[136,1280,124],{"class":150},[136,1282,342],{"class":341},[136,1284,345],{"class":150},[136,1286,1287],{"class":348},"--ui-info",[136,1289,352],{"class":150},[136,1291,1292],{"class":138,"line":224},[136,1293,460],{"class":150},[136,1295,1296],{"class":138,"line":231},[136,1297,228],{"emptyLinePlaceholder":227},[136,1299,1300,1302,1305,1307,1309],{"class":138,"line":248},[136,1301,1228],{"class":164},[136,1303,1304],{"class":168},"btn-skew-warning",[136,1306,239],{"class":238},[136,1308,243],{"class":242},[136,1310,172],{"class":150},[136,1312,1313,1315,1317,1319,1321,1324],{"class":138,"line":262},[136,1314,1242],{"class":178},[136,1316,124],{"class":150},[136,1318,342],{"class":341},[136,1320,345],{"class":150},[136,1322,1323],{"class":348},"--ui-warning",[136,1325,352],{"class":150},[136,1327,1328],{"class":138,"line":274},[136,1329,460],{"class":150},[136,1331,1332],{"class":138,"line":286},[136,1333,228],{"emptyLinePlaceholder":227},[136,1335,1336,1338,1341,1343,1345],{"class":138,"line":303},[136,1337,1228],{"class":164},[136,1339,1340],{"class":168},"btn-skew-neutral",[136,1342,239],{"class":238},[136,1344,243],{"class":242},[136,1346,172],{"class":150},[136,1348,1349,1351,1353,1355,1357,1360],{"class":138,"line":319},[136,1350,1242],{"class":178},[136,1352,124],{"class":150},[136,1354,342],{"class":341},[136,1356,345],{"class":150},[136,1358,1359],{"class":348},"--ui-bg-inverted",[136,1361,352],{"class":150},[136,1363,1364],{"class":138,"line":333},[136,1365,460],{"class":150},[30,1367,1369],{"id":1368},"usage","Usage",[11,1371,1372],{},"Now you can use your custom variant just like any built-in variant:",[126,1374,1379],{"className":1375,"code":1376,"filename":1377,"language":1378,"meta":132,"style":132},"language-vue shiki shiki-themes material-theme-lighter one-light one-dark-pro","\u003Ctemplate>\n  \u003Cdiv class=\"flex gap-4\">\n    \u003C!-- Primary skew button -->\n    \u003CUButton variant=\"skew\" color=\"primary\">\n      Get Started\n    \u003C\u002FUButton>\n\n    \u003C!-- Success skew button -->\n    \u003CUButton variant=\"skew\" color=\"success\">\n      Save Changes\n    \u003C\u002FUButton>\n\n    \u003C!-- With an icon -->\n    \u003CUButton variant=\"skew\" color=\"primary\" icon=\"lucide:download\">\n      Download\n    \u003C\u002FUButton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","example.vue","vue",[38,1380,1381,1392,1416,1421,1453,1458,1467,1471,1476,1504,1509,1517,1521,1526,1566,1571,1579,1588],{"__ignoreMap":132},[136,1382,1383,1386,1389],{"class":138,"line":139},[136,1384,1385],{"class":150},"\u003C",[136,1387,1388],{"class":568},"template",[136,1390,1391],{"class":150},">\n",[136,1393,1394,1397,1400,1404,1407,1409,1412,1414],{"class":138,"line":154},[136,1395,1396],{"class":150},"  \u003C",[136,1398,1399],{"class":568},"div",[136,1401,1403],{"class":1402},"sGh1W"," class",[136,1405,1406],{"class":150},"=",[136,1408,600],{"class":256},[136,1410,1411],{"class":596},"flex gap-4",[136,1413,600],{"class":256},[136,1415,1391],{"class":150},[136,1417,1418],{"class":138,"line":161},[136,1419,1420],{"class":157},"    \u003C!-- Primary skew button -->\n",[136,1422,1423,1426,1429,1432,1434,1436,1438,1440,1443,1445,1447,1449,1451],{"class":138,"line":175},[136,1424,1425],{"class":150},"    \u003C",[136,1427,1428],{"class":568},"UButton",[136,1430,1431],{"class":1402}," variant",[136,1433,1406],{"class":150},[136,1435,600],{"class":256},[136,1437,58],{"class":596},[136,1439,600],{"class":256},[136,1441,1442],{"class":1402}," color",[136,1444,1406],{"class":150},[136,1446,600],{"class":256},[136,1448,948],{"class":596},[136,1450,600],{"class":256},[136,1452,1391],{"class":150},[136,1454,1455],{"class":138,"line":191},[136,1456,1457],{"class":146},"      Get Started\n",[136,1459,1460,1463,1465],{"class":138,"line":204},[136,1461,1462],{"class":150},"    \u003C\u002F",[136,1464,1428],{"class":568},[136,1466,1391],{"class":150},[136,1468,1469],{"class":138,"line":218},[136,1470,228],{"emptyLinePlaceholder":227},[136,1472,1473],{"class":138,"line":224},[136,1474,1475],{"class":157},"    \u003C!-- Success skew button -->\n",[136,1477,1478,1480,1482,1484,1486,1488,1490,1492,1494,1496,1498,1500,1502],{"class":138,"line":231},[136,1479,1425],{"class":150},[136,1481,1428],{"class":568},[136,1483,1431],{"class":1402},[136,1485,1406],{"class":150},[136,1487,600],{"class":256},[136,1489,58],{"class":596},[136,1491,600],{"class":256},[136,1493,1442],{"class":1402},[136,1495,1406],{"class":150},[136,1497,600],{"class":256},[136,1499,1000],{"class":596},[136,1501,600],{"class":256},[136,1503,1391],{"class":150},[136,1505,1506],{"class":138,"line":248},[136,1507,1508],{"class":146},"      Save Changes\n",[136,1510,1511,1513,1515],{"class":138,"line":262},[136,1512,1462],{"class":150},[136,1514,1428],{"class":568},[136,1516,1391],{"class":150},[136,1518,1519],{"class":138,"line":274},[136,1520,228],{"emptyLinePlaceholder":227},[136,1522,1523],{"class":138,"line":286},[136,1524,1525],{"class":157},"    \u003C!-- With an icon -->\n",[136,1527,1528,1530,1532,1534,1536,1538,1540,1542,1544,1546,1548,1550,1552,1555,1557,1559,1562,1564],{"class":138,"line":303},[136,1529,1425],{"class":150},[136,1531,1428],{"class":568},[136,1533,1431],{"class":1402},[136,1535,1406],{"class":150},[136,1537,600],{"class":256},[136,1539,58],{"class":596},[136,1541,600],{"class":256},[136,1543,1442],{"class":1402},[136,1545,1406],{"class":150},[136,1547,600],{"class":256},[136,1549,948],{"class":596},[136,1551,600],{"class":256},[136,1553,1554],{"class":1402}," icon",[136,1556,1406],{"class":150},[136,1558,600],{"class":256},[136,1560,1561],{"class":596},"lucide:download",[136,1563,600],{"class":256},[136,1565,1391],{"class":150},[136,1567,1568],{"class":138,"line":319},[136,1569,1570],{"class":146},"      Download\n",[136,1572,1573,1575,1577],{"class":138,"line":333},[136,1574,1462],{"class":150},[136,1576,1428],{"class":568},[136,1578,1391],{"class":150},[136,1580,1581,1584,1586],{"class":138,"line":355},[136,1582,1583],{"class":150},"  \u003C\u002F",[136,1585,1399],{"class":568},[136,1587,1391],{"class":150},[136,1589,1590,1593,1595],{"class":138,"line":376},[136,1591,1592],{"class":150},"\u003C\u002F",[136,1594,1388],{"class":568},[136,1596,1391],{"class":150},[30,1598,1600],{"id":1599},"bonus-circular-button-variant","Bonus: Circular Button Variant",[11,1602,1603],{},"For circular buttons like a scroll-to-top button, the skew effect doesn't work well because of the rounded shape. Here's a variant that expands from the center instead.",[11,1605,1606],{},"First, add the CSS:",[538,1608,1609],{},[126,1610,1612],{"className":128,"code":1611,"filename":130,"language":131,"meta":132,"style":132},"\u002F* Circular Button Animation - for rounded-full buttons *\u002F\n.btn-skew-circle {\n  position: relative;\n  overflow: hidden;\n  z-index: 0;\n}\n\n.btn-skew-circle::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 0%;\n  height: 0%;\n  background-color: var(--ui-primary);\n  border-radius: 50%;\n  transform: translate(-50%, -50%);\n  z-index: -1;\n  transition: width 300ms ease-out, height 300ms ease-out;\n}\n\n.btn-skew-circle:hover::before {\n  width: 150%;\n  height: 150%;\n}\n",[38,1613,1614,1619,1628,1639,1650,1661,1665,1669,1681,1692,1702,1716,1729,1742,1755,1769,1782,1809,1819,1848,1852,1856,1872,1884,1896],{"__ignoreMap":132},[136,1615,1616],{"class":138,"line":139},[136,1617,1618],{"class":157},"\u002F* Circular Button Animation - for rounded-full buttons *\u002F\n",[136,1620,1621,1623,1626],{"class":138,"line":154},[136,1622,1228],{"class":164},[136,1624,1625],{"class":168},"btn-skew-circle",[136,1627,172],{"class":150},[136,1629,1630,1633,1635,1637],{"class":138,"line":161},[136,1631,1632],{"class":178},"  position",[136,1634,124],{"class":150},[136,1636,185],{"class":184},[136,1638,188],{"class":150},[136,1640,1641,1644,1646,1648],{"class":138,"line":175},[136,1642,1643],{"class":178},"  overflow",[136,1645,124],{"class":150},[136,1647,199],{"class":184},[136,1649,188],{"class":150},[136,1651,1652,1655,1657,1659],{"class":138,"line":191},[136,1653,1654],{"class":178},"  z-index",[136,1656,124],{"class":150},[136,1658,213],{"class":212},[136,1660,188],{"class":150},[136,1662,1663],{"class":138,"line":204},[136,1664,460],{"class":150},[136,1666,1667],{"class":138,"line":218},[136,1668,228],{"emptyLinePlaceholder":227},[136,1670,1671,1673,1675,1677,1679],{"class":138,"line":224},[136,1672,1228],{"class":164},[136,1674,1625],{"class":168},[136,1676,239],{"class":238},[136,1678,243],{"class":242},[136,1680,172],{"class":150},[136,1682,1683,1686,1688,1690],{"class":138,"line":231},[136,1684,1685],{"class":178},"  content",[136,1687,124],{"class":150},[136,1689,257],{"class":256},[136,1691,188],{"class":150},[136,1693,1694,1696,1698,1700],{"class":138,"line":248},[136,1695,1632],{"class":178},[136,1697,124],{"class":150},[136,1699,269],{"class":184},[136,1701,188],{"class":150},[136,1703,1704,1707,1709,1712,1714],{"class":138,"line":262},[136,1705,1706],{"class":178},"  top",[136,1708,124],{"class":150},[136,1710,1711],{"class":212}," 50",[136,1713,314],{"class":297},[136,1715,188],{"class":150},[136,1717,1718,1721,1723,1725,1727],{"class":138,"line":274},[136,1719,1720],{"class":178},"  left",[136,1722,124],{"class":150},[136,1724,1711],{"class":212},[136,1726,314],{"class":297},[136,1728,188],{"class":150},[136,1730,1731,1734,1736,1738,1740],{"class":138,"line":286},[136,1732,1733],{"class":178},"  width",[136,1735,124],{"class":150},[136,1737,213],{"class":212},[136,1739,314],{"class":297},[136,1741,188],{"class":150},[136,1743,1744,1747,1749,1751,1753],{"class":138,"line":303},[136,1745,1746],{"class":178},"  height",[136,1748,124],{"class":150},[136,1750,213],{"class":212},[136,1752,314],{"class":297},[136,1754,188],{"class":150},[136,1756,1757,1759,1761,1763,1765,1767],{"class":138,"line":319},[136,1758,1242],{"class":178},[136,1760,124],{"class":150},[136,1762,342],{"class":341},[136,1764,345],{"class":150},[136,1766,349],{"class":348},[136,1768,352],{"class":150},[136,1770,1771,1774,1776,1778,1780],{"class":138,"line":333},[136,1772,1773],{"class":178},"  border-radius",[136,1775,124],{"class":150},[136,1777,1711],{"class":212},[136,1779,314],{"class":297},[136,1781,188],{"class":150},[136,1783,1784,1787,1789,1792,1794,1797,1799,1802,1805,1807],{"class":138,"line":355},[136,1785,1786],{"class":178},"  transform",[136,1788,124],{"class":150},[136,1790,1791],{"class":341}," translate",[136,1793,345],{"class":150},[136,1795,1796],{"class":212},"-50",[136,1798,314],{"class":297},[136,1800,1801],{"class":150},",",[136,1803,1804],{"class":212}," -50",[136,1806,314],{"class":297},[136,1808,352],{"class":150},[136,1810,1811,1813,1815,1817],{"class":138,"line":376},[136,1812,1654],{"class":178},[136,1814,124],{"class":150},[136,1816,383],{"class":212},[136,1818,188],{"class":150},[136,1820,1821,1824,1826,1828,1831,1833,1835,1837,1840,1842,1844,1846],{"class":138,"line":388},[136,1822,1823],{"class":178},"  transition",[136,1825,124],{"class":150},[136,1827,396],{"class":146},[136,1829,1830],{"class":212},"300",[136,1832,402],{"class":297},[136,1834,405],{"class":184},[136,1836,1801],{"class":150},[136,1838,1839],{"class":146}," height ",[136,1841,1830],{"class":212},[136,1843,402],{"class":297},[136,1845,405],{"class":184},[136,1847,188],{"class":150},[136,1849,1850],{"class":138,"line":410},[136,1851,460],{"class":150},[136,1853,1854],{"class":138,"line":415},[136,1855,228],{"emptyLinePlaceholder":227},[136,1857,1858,1860,1862,1864,1866,1868,1870],{"class":138,"line":420},[136,1859,1228],{"class":164},[136,1861,1625],{"class":168},[136,1863,124],{"class":238},[136,1865,429],{"class":242},[136,1867,239],{"class":238},[136,1869,243],{"class":242},[136,1871,172],{"class":150},[136,1873,1874,1876,1878,1880,1882],{"class":138,"line":438},[136,1875,1733],{"class":178},[136,1877,124],{"class":150},[136,1879,445],{"class":212},[136,1881,314],{"class":297},[136,1883,188],{"class":150},[136,1885,1886,1888,1890,1892,1894],{"class":138,"line":452},[136,1887,1746],{"class":178},[136,1889,124],{"class":150},[136,1891,445],{"class":212},[136,1893,314],{"class":297},[136,1895,188],{"class":150},[136,1897,1898],{"class":138,"line":457},[136,1899,460],{"class":150},[11,1901,1902,1903,124],{},"Then register it as a variant in ",[38,1904,104],{},[126,1906,1908],{"className":542,"code":1907,"filename":104,"language":544,"meta":132,"style":132},"button: {\n  variants: {\n    variant: {\n      skew: { \u002F* ... *\u002F },\n      \"skew-circle\": {\n        base: [\n          \"btn-skew-circle\",\n          \"rounded-full\",\n          \"border border-neutral-300 dark:border-neutral-700\",\n          \"bg-default\",\n          \"transition-all duration-300\",\n          \"hover:border-primary\",\n          \"hover:text-white dark:hover:text-default\",\n          \"disabled:cursor-not-allowed\",\n          \"disabled:opacity-50\",\n        ],\n      },\n    },\n  },\n  compoundVariants: [\n    \u002F\u002F ... other variants\n    {\n      variant: \"skew-circle\",\n      color: \"primary\",\n      class: \"btn-skew-circle\",\n    },\n  ],\n}\n",[38,1909,1910,1920,1929,1938,1954,1970,1979,1990,2001,2011,2021,2031,2041,2051,2061,2071,2078,2082,2086,2090,2099,2104,2109,2124,2139,2154,2158,2165],{"__ignoreMap":132},[136,1911,1912,1916,1918],{"class":138,"line":139},[136,1913,1915],{"class":1914},"sPgms","button",[136,1917,124],{"class":150},[136,1919,172],{"class":150},[136,1921,1922,1925,1927],{"class":138,"line":154},[136,1923,1924],{"class":1914},"  variants",[136,1926,124],{"class":150},[136,1928,172],{"class":150},[136,1930,1931,1934,1936],{"class":138,"line":161},[136,1932,1933],{"class":1914},"    variant",[136,1935,124],{"class":150},[136,1937,172],{"class":150},[136,1939,1940,1943,1945,1948,1951],{"class":138,"line":175},[136,1941,1942],{"class":1914},"      skew",[136,1944,124],{"class":150},[136,1946,1947],{"class":150}," {",[136,1949,1950],{"class":157}," \u002F* ... *\u002F",[136,1952,1953],{"class":150}," },\n",[136,1955,1956,1959,1962,1964,1968],{"class":138,"line":191},[136,1957,1958],{"class":256},"      \"",[136,1960,1961],{"class":596},"skew-circle",[136,1963,600],{"class":256},[136,1965,1967],{"class":1966},"sA0eD",": ",[136,1969,151],{"class":150},[136,1971,1972,1975,1977],{"class":138,"line":204},[136,1973,1974],{"class":568},"        base",[136,1976,124],{"class":572},[136,1978,670],{"class":1966},[136,1980,1981,1984,1986,1988],{"class":138,"line":218},[136,1982,1983],{"class":256},"          \"",[136,1985,1625],{"class":596},[136,1987,600],{"class":256},[136,1989,603],{"class":150},[136,1991,1992,1994,1997,1999],{"class":138,"line":224},[136,1993,1983],{"class":256},[136,1995,1996],{"class":596},"rounded-full",[136,1998,600],{"class":256},[136,2000,603],{"class":150},[136,2002,2003,2005,2007,2009],{"class":138,"line":231},[136,2004,1983],{"class":256},[136,2006,688],{"class":596},[136,2008,600],{"class":256},[136,2010,603],{"class":150},[136,2012,2013,2015,2017,2019],{"class":138,"line":248},[136,2014,1983],{"class":256},[136,2016,699],{"class":596},[136,2018,600],{"class":256},[136,2020,603],{"class":150},[136,2022,2023,2025,2027,2029],{"class":138,"line":262},[136,2024,1983],{"class":256},[136,2026,710],{"class":596},[136,2028,600],{"class":256},[136,2030,603],{"class":150},[136,2032,2033,2035,2037,2039],{"class":138,"line":274},[136,2034,1983],{"class":256},[136,2036,721],{"class":596},[136,2038,600],{"class":256},[136,2040,603],{"class":150},[136,2042,2043,2045,2047,2049],{"class":138,"line":286},[136,2044,1983],{"class":256},[136,2046,732],{"class":596},[136,2048,600],{"class":256},[136,2050,603],{"class":150},[136,2052,2053,2055,2057,2059],{"class":138,"line":303},[136,2054,1983],{"class":256},[136,2056,743],{"class":596},[136,2058,600],{"class":256},[136,2060,603],{"class":150},[136,2062,2063,2065,2067,2069],{"class":138,"line":319},[136,2064,1983],{"class":256},[136,2066,754],{"class":596},[136,2068,600],{"class":256},[136,2070,603],{"class":150},[136,2072,2073,2076],{"class":138,"line":333},[136,2074,2075],{"class":1966},"        ]",[136,2077,603],{"class":150},[136,2079,2080],{"class":138,"line":355},[136,2081,780],{"class":150},[136,2083,2084],{"class":138,"line":376},[136,2085,624],{"class":150},[136,2087,2088],{"class":138,"line":388},[136,2089,789],{"class":150},[136,2091,2092,2095,2097],{"class":138,"line":410},[136,2093,2094],{"class":1914},"  compoundVariants",[136,2096,124],{"class":150},[136,2098,670],{"class":1966},[136,2100,2101],{"class":138,"line":415},[136,2102,2103],{"class":157},"    \u002F\u002F ... other variants\n",[136,2105,2106],{"class":138,"line":420},[136,2107,2108],{"class":150},"    {\n",[136,2110,2111,2114,2116,2118,2120,2122],{"class":138,"line":438},[136,2112,2113],{"class":568},"      variant",[136,2115,124],{"class":572},[136,2117,593],{"class":256},[136,2119,1961],{"class":596},[136,2121,600],{"class":256},[136,2123,603],{"class":150},[136,2125,2126,2129,2131,2133,2135,2137],{"class":138,"line":452},[136,2127,2128],{"class":568},"      color",[136,2130,124],{"class":572},[136,2132,593],{"class":256},[136,2134,948],{"class":596},[136,2136,600],{"class":256},[136,2138,603],{"class":150},[136,2140,2141,2144,2146,2148,2150,2152],{"class":138,"line":457},[136,2142,2143],{"class":568},"      class",[136,2145,124],{"class":572},[136,2147,593],{"class":256},[136,2149,1625],{"class":596},[136,2151,600],{"class":256},[136,2153,603],{"class":150},[136,2155,2156],{"class":138,"line":792},[136,2157,624],{"class":150},[136,2159,2160,2163],{"class":138,"line":1134},[136,2161,2162],{"class":1966},"  ]",[136,2164,603],{"class":150},[136,2166,2167],{"class":138,"line":1149},[136,2168,460],{"class":150},[11,2170,2171],{},"Now you can use it cleanly without adding extra classes:",[126,2173,2176],{"className":1375,"code":2174,"filename":2175,"language":1378,"meta":132,"style":132},"\u003CUButton\n  icon=\"lucide:arrow-up\"\n  variant=\"skew-circle\"\n  color=\"primary\"\n  aria-label=\"Scroll to top\"\n\u002F>\n","ScrollToTop.vue",[38,2177,2178,2185,2200,2213,2226,2240],{"__ignoreMap":132},[136,2179,2180,2182],{"class":138,"line":139},[136,2181,1385],{"class":150},[136,2183,2184],{"class":568},"UButton\n",[136,2186,2187,2190,2192,2194,2197],{"class":138,"line":154},[136,2188,2189],{"class":1402},"  icon",[136,2191,1406],{"class":150},[136,2193,600],{"class":256},[136,2195,2196],{"class":596},"lucide:arrow-up",[136,2198,2199],{"class":256},"\"\n",[136,2201,2202,2205,2207,2209,2211],{"class":138,"line":161},[136,2203,2204],{"class":1402},"  variant",[136,2206,1406],{"class":150},[136,2208,600],{"class":256},[136,2210,1961],{"class":596},[136,2212,2199],{"class":256},[136,2214,2215,2218,2220,2222,2224],{"class":138,"line":175},[136,2216,2217],{"class":1402},"  color",[136,2219,1406],{"class":150},[136,2221,600],{"class":256},[136,2223,948],{"class":596},[136,2225,2199],{"class":256},[136,2227,2228,2231,2233,2235,2238],{"class":138,"line":191},[136,2229,2230],{"class":1402},"  aria-label",[136,2232,1406],{"class":150},[136,2234,600],{"class":256},[136,2236,2237],{"class":596},"Scroll to top",[136,2239,2199],{"class":256},[136,2241,2242],{"class":138,"line":204},[136,2243,2244],{"class":146},"\u002F>\n",[11,2246,2247,2248,2250],{},"The key difference is that ",[38,2249,1961],{}," uses:",[68,2252,2253,2261,2269],{},[71,2254,2255,2260],{},[17,2256,2257],{},[38,2258,2259],{},"border-radius: 50%"," on the pseudo-element for a circular fill",[71,2262,2263,2268],{},[17,2264,2265],{},[38,2266,2267],{},"transform: translate(-50%, -50%)"," to center the animation",[71,2270,2271,2274],{},[17,2272,2273],{},"Both width and height"," animate together for uniform expansion",[30,2276,2278],{"id":2277},"key-takeaways","Key Takeaways",[88,2280,2281,2290,2296,2302,2311],{},[71,2282,2283,2286,2287,2289],{},[17,2284,2285],{},"CSS Variables",": Use Nuxt UI's CSS variables like ",[38,2288,515],{}," for consistent theming",[71,2291,2292,2295],{},[17,2293,2294],{},"Compound Variants",": Allow you to combine variant + color for specific styling",[71,2297,2298,2301],{},[17,2299,2300],{},"Pseudo-elements",": Perfect for creating animated backgrounds without extra DOM elements",[71,2303,2304,2310],{},[17,2305,2306,2309],{},[38,2307,2308],{},"z-index"," layering",": Keep animations behind content using negative z-index",[71,2312,2313,2316,2317,2320],{},[17,2314,2315],{},"Transition timing",": The ",[38,2318,2319],{},"500ms ease-out"," creates a smooth, premium feel",[30,2322,2324],{"id":2323},"common-pitfalls","Common Pitfalls",[1104,2326,2327],{},[11,2328,2329,2332,2333,2335],{},[17,2330,2331],{},"Overflow Hidden",": Always set ",[38,2334,478],{}," on the button to clip the animated pseudo-element.",[2337,2338,2339],"caution",{},[11,2340,2341,2344,2345,2347,2348,2351],{},[17,2342,2343],{},"Z-Index Context",": Make sure your pseudo-element has ",[38,2346,525],{}," and the parent has ",[38,2349,2350],{},"z-index: 0"," to create a proper stacking context.",[30,2353,2355],{"id":2354},"conclusion","Conclusion",[11,2357,2358,2359,2361],{},"Nuxt UI's configuration system makes it incredibly easy to extend the component library with custom variants. By combining CSS pseudo-elements with the ",[38,2360,104],{}," configuration, you can create unique, branded button styles that work seamlessly with Nuxt UI's theming system.",[11,2363,2364],{},"The skew effect adds a touch of premium interactivity to any button, making your UI feel more polished and engaging. Try experimenting with different animations, timing functions, and transform properties to create your own signature effects!",[30,2366,2368],{"id":2367},"resources","Resources",[68,2370,2371,2380,2387],{},[71,2372,2373],{},[2374,2375,2379],"a",{"href":2376,"rel":2377},"https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fgetting-started\u002Ftheme\u002Fcomponents",[2378],"nofollow","Nuxt UI Documentation",[71,2381,2382],{},[2374,2383,2386],{"href":2384,"rel":2385},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002F::before",[2378],"CSS Pseudo-elements",[71,2388,2389],{},[2374,2390,2393],{"href":2391,"rel":2392},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Ftransform",[2378],"CSS Transforms",[30,2395,2397],{"id":2396},"thank-you","Thank You",[2399,2400,2401],"style",{},"html pre.shiki code .sQsOY, html code.shiki .sQsOY{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#A626A4;--shiki-default-font-style:inherit;--shiki-dark:#C678DD;--shiki-dark-font-style:inherit}html pre.shiki code .sM89C, html code.shiki .sM89C{--shiki-light:#90A4AE;--shiki-default:#383A42;--shiki-dark:#ABB2BF}html pre.shiki code .sB4Xn, html code.shiki .sB4Xn{--shiki-light:#39ADB5;--shiki-default:#383A42;--shiki-dark:#ABB2BF}html pre.shiki code .seacL, html code.shiki .seacL{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#A0A1A7;--shiki-default-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic}html pre.shiki code .svDm9, html code.shiki .svDm9{--shiki-light:#39ADB5;--shiki-default:#986801;--shiki-dark:#D19A66}html pre.shiki code .s6wAS, html code.shiki .s6wAS{--shiki-light:#E2931D;--shiki-default:#986801;--shiki-dark:#D19A66}html pre.shiki code .sGRuu, html code.shiki .sGRuu{--shiki-light:#8796B0;--shiki-default:#383A42;--shiki-dark:#ABB2BF}html pre.shiki code .sngOx, html code.shiki .sngOx{--shiki-light:#90A4AE;--shiki-default:#383A42;--shiki-dark:#D19A66}html pre.shiki code .sriKn, html code.shiki .sriKn{--shiki-light:#F76D47;--shiki-default:#986801;--shiki-dark:#D19A66}html pre.shiki code .sst0O, html code.shiki .sst0O{--shiki-light:#39ADB5;--shiki-default:#986801;--shiki-dark:#56B6C2}html pre.shiki code .sSxop, html code.shiki .sSxop{--shiki-light:#9C3EDA;--shiki-default:#986801;--shiki-dark:#56B6C2}html pre.shiki code .sVH1b, html code.shiki .sVH1b{--shiki-light:#39ADB5;--shiki-default:#50A14F;--shiki-dark:#98C379}html pre.shiki code .sLhkd, html code.shiki .sLhkd{--shiki-light:#F76D47;--shiki-default:#986801;--shiki-dark:#E06C75}html pre.shiki code .sTDPv, html code.shiki .sTDPv{--shiki-light:#6182B8;--shiki-default:#0184BC;--shiki-dark:#56B6C2}html pre.shiki code .s8dPH, html code.shiki .s8dPH{--shiki-light:#90A4AE;--shiki-default:#E45649;--shiki-dark:#E06C75}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sH50Z, html code.shiki .sH50Z{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#E45649;--shiki-default-font-style:inherit;--shiki-dark:#C678DD;--shiki-dark-font-style:inherit}html pre.shiki code .spnjr, html code.shiki .spnjr{--shiki-light:#6182B8;--shiki-default:#4078F2;--shiki-dark:#61AFEF}html pre.shiki code .su13H, html code.shiki .su13H{--shiki-light:#E53935;--shiki-default:#E45649;--shiki-dark:#E06C75}html pre.shiki code .saKOp, html code.shiki .saKOp{--shiki-light:#39ADB5;--shiki-default:#0184BC;--shiki-dark:#ABB2BF}html pre.shiki code .spZWa, html code.shiki .spZWa{--shiki-light:#91B859;--shiki-default:#50A14F;--shiki-dark:#98C379}html pre.shiki code .sGh1W, html code.shiki .sGh1W{--shiki-light:#9C3EDA;--shiki-default:#986801;--shiki-dark:#D19A66}html pre.shiki code .sPgms, html code.shiki .sPgms{--shiki-light:#E2931D;--shiki-default:#383A42;--shiki-dark:#E06C75}html pre.shiki code .sA0eD, html code.shiki .sA0eD{--shiki-light:#E53935;--shiki-default:#383A42;--shiki-dark:#ABB2BF}",{"title":132,"searchDepth":154,"depth":154,"links":2403},[2404,2405,2406,2407,2410,2413,2414,2415,2416,2417,2418,2419,2420],{"id":32,"depth":154,"text":33},{"id":62,"depth":154,"text":63},{"id":82,"depth":154,"text":83},{"id":116,"depth":154,"text":117,"children":2408},[2409],{"id":464,"depth":161,"text":465},{"id":529,"depth":154,"text":530,"children":2411},[2412],{"id":803,"depth":161,"text":804},{"id":863,"depth":154,"text":864},{"id":1368,"depth":154,"text":1369},{"id":1599,"depth":154,"text":1600},{"id":2277,"depth":154,"text":2278},{"id":2323,"depth":154,"text":2324},{"id":2354,"depth":154,"text":2355},{"id":2367,"depth":154,"text":2368},{"id":2396,"depth":154,"text":2397},"2026-01-17",false,"md",{"slug":2425,"difficulty":2426,"featured":227,"icon":2427,"ogImage":2428,"tags":2430,"topic":2427},"nuxt-ui-custom-button-variants","intermediate","nuxt",{"alt":2429},"Custom button variants in Nuxt UI",[2427,2431,131,2432],"nuxt-ui","guide","\u002Farticles\u002Fnuxt-ui-custom-button-variants",{"title":5,"description":13},"articles\u002Fnuxt-ui-custom-button-variants","7Nfqzz-tDpTzanfcGL90dM2FgDZbg3OtcgotntAfaHo",[6,2438],{"title":2439,"path":2440,"stem":2441,"description":2442,"children":-1},"How to Handle Browser Back Button Navigation Events in Vue 3","\u002Farticles\u002Fremote-back-button-js","articles\u002Fremote-back-button-js","As web applications become more sophisticated, managing browser navigation becomes increasingly complex. One common challenge is handling the browser's back button when dealing with modals, dialogs, or drawers. Today, we'll explore a powerful Vue 3 composable that solves this problem while maintaining a smooth user experience.",1778820754460]