## Implementation Context - **Primary**: Use **SenangStart CSS** for the implementation. - **Reference**: Tailwind CSS is provided for stylistic context only. ## SenangStart CSS Usage To use SenangStart CSS, simply include the script in your HTML ``: ```html My App

Hello SenangStart!

Zero config, instant styling.

``` **Documentation**: [Getting Started Guide](https://bookklik-technologies.github.io/senangstart-css/guide/getting-started.html) # Buttons (Outline) Category: actions Description: Outline Buttons ## Small Variant ### SenangStart CSS Code ```html <button type="button" layout="flex items:center justify:center" space="p-x:medium h:large-3x" visual="border-w:regular border:blue-600 text:blue-600 bg:[transparent] rounded:medium text-size:small font:tw-semibold hover:bg:blue-50 focus:ring:medium focus:ring-color:blue-300 transition:all">Button S</button> ``` ### Tailwind CSS Code ```html <button type="button" class="border-2 border-blue-600 text-blue-600 bg-transparent rounded-lg text-sm font-semibold px-4 h-10 flex items-center justify-center hover:bg-blue-50 focus:ring-4 focus:ring-blue-300 transition-all">Button S</button> ``` ## Medium Variant ### SenangStart CSS Code ```html <button type="button" layout="flex items:center justify:center" space="p-x:medium-3x h:big" visual="border-w:regular border:blue-600 text:blue-600 bg:[transparent] rounded:medium text-size:base font:tw-semibold hover:bg:blue-50 focus:ring:medium focus:ring-color:blue-300 transition:all">Button M</button> ``` ### Tailwind CSS Code ```html <button type="button" class="border-2 border-blue-600 text-blue-600 bg-transparent rounded-lg text-base font-semibold px-6 h-12 flex items-center justify-center hover:bg-blue-50 focus:ring-4 focus:ring-blue-300 transition-all">Button M</button> ``` ## Large Variant ### SenangStart CSS Code ```html <button type="button" layout="flex items:center justify:center" space="p-x:large h:big-2x" visual="border-w:regular border:blue-600 text:blue-600 bg:[transparent] rounded:medium text-size:large font:tw-semibold hover:bg:blue-50 focus:ring:medium focus:ring-color:blue-300 transition:all">Button L</button> ``` ### Tailwind CSS Code ```html <button type="button" class="border-2 border-blue-600 text-blue-600 bg-transparent rounded-lg text-lg font-semibold px-8 h-14 flex items-center justify-center hover:bg-blue-50 focus:ring-4 focus:ring-blue-300 transition-all">Button L</button> ```