aliascss/ui/button.html

AliasCSS is a CSS post processor.

<div class="button _.btn-af-cont-hello_world button-200811-1284" class-button-200811-1284[_.btn-af]="c-red"
    data-size="xxl" xdata-type="secondary" xdisabled>
    <!-- Acss-Wrapper -->
    <div class=""
        class-btn="_all-bsbb-i c-fff cp _all-bsbb p8px-12px bg-7F56D9 bxs-0px-1px-2px-0160240400d05 br-8px jcc aic g-4px dif b1px-primary600-solid text-sm fw6 -h-b-1px-s-6941C6 -h-bgc-6941C6 -h-bxs-0px-1px-2px-0px-0160240400d05"
        class-btn[--is-[data-type-eql-secondary]&]=" __.addon-bc-344054 --hover-bgc-f9fafb --hover-bc-d0d4dd  bgc-fff bc-d0d5dd c-344054"
        class-btn[--is-[disabled]&]="_.addon-b-1d67px-solid-98A2B3 bgc-F2F4F7 bc-EAECF0 c-98A2B3 -h-bgc-F2F4F7 -h-cna -h-bc-EAECF0"
        class-btn[--is(_.button[data-size-eql-md])&]="p10px-14px"
        class-btn[--is(_.button[data-size-eql-lg])&]="p10px-16px  text-md"
        class-btn[--is(_.button[data-size-eql-xl])&]="p12px-18px g-6px text-md"
        class-btn[--is(_.button[data-size-eql-xxl])&]="p16px-22px g-10px text-lg __.addon-h24px __.addon-w24px"
        class-btn[--is(_.button[data-size-eql-2xl])&]="p16px-22px g-10px text-lg __.addon-h24px __.addon-w24px"
        class-button[_.addon]="df bsbb w20px h20px br100p b-1d67px-solid">
        <!-- Component -->
        <button class="btn" data-type="primary">
            <!-- button-addon-rt -->
            <span class="rt addon "></span>
            <span class="">Button CTA</span>
            <!-- button-addon-lt -->
            <span class="lt addon"></span>
        </button>
        <!-- End-Of-Component -->
    </div>
    <!-- End -Of-Acss-Wrapper -->
</div>