## 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 Category: actions Description: Standard Action Buttons ## Small Variant ### SenangStart CSS Code ```html <button type="button" layout="flex items:center justify:center" space="p-x:medium h:large-3x" visual="bg:blue-600 text:white rounded:medium text-size:small font:tw-semibold hover:bg:blue-700 focus:ring:medium focus:ring-color:blue-300 transition:all">Button S</button> ``` ### Tailwind CSS Code ```html <button type="button" class="bg-blue-600 text-white rounded-lg text-sm font-semibold px-4 h-10 flex items-center justify-center hover:bg-blue-700 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="bg:blue-600 text:white rounded:medium text-size:base font:tw-semibold hover:bg:blue-700 focus:ring:medium focus:ring-color:blue-300 transition:all">Button M</button> ``` ### Tailwind CSS Code ```html <button type="button" class="bg-blue-600 text-white rounded-lg text-base font-semibold px-6 h-12 flex items-center justify-center hover:bg-blue-700 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="bg:blue-600 text:white rounded:medium text-size:large font:tw-semibold hover:bg:blue-700 focus:ring:medium focus:ring-color:blue-300 transition:all">Button L</button> ``` ### Tailwind CSS Code ```html <button type="button" class="bg-blue-600 text-white rounded-lg text-lg font-semibold px-8 h-14 flex items-center justify-center hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 transition-all">Button L</button> ```