aliascss/ui/buttonold.html

AliasCSS is a CSS post processor.

<div data-size="xxl" data-type="secondary">
    <button
        class="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 btn-md btn-lg btn-xl btn-2xl btn-xxl btn"
        class-btn='--is-[data-type=secondary]&--hover-bgc-f9fafb --is-[data-type=secondary]&--hover-bc-d0d4dd  --is-[data-type=secondary]&bgc-fff --is-[data-type=secondary]&bc-d0d5dd --is-[data-type=secondary]&c-344054 --is-[disabled]&-bgc-F2F4F7 --is-[disabled]&-bc-EAECF0 --is-[disabled]&-c-98A2B3'
        class-btn[--hover]="--is-[disabled]&-bgc-F2F4F7 --is-[disabled]&cna --is-[disabled]&-bc-EAECF0 b-1px-s-6941C6 bgc-6941C6 bxs-0px-1px-2px-0px-0160240400d05"
        class-btn-md="--is-[data-size=md]&-p10px-14px"
        class-btn-lg=" --is-[data-size=lg]&-p10px-16px --is-[data-size=lg]&-text-md"
        class-btn-xl="--is-[data-size=xl]&-p12px-18px --is-[data-size=xl]&-g-6px --is-[data-size=xl]&-text-md"
        class-btn-xxl="--is-[data-size=xxl]&-p16px-22px --is-[data-size=xxl]&-g-10px --is-[data-size=xxl]&-text-lg"
        class-btn-2xl="--is-[data-size=2xl]&-p16px-22px --is-[data-size=2xl]&-g-10px --is-[data-size=2xl]&-text-lg"
        style="">
        <span class="btn-addon"
            class-btn-addon="--is-[data-size=xxl]&-w24px  --is-[data-size=xxl]&-h24px --is-[data-size=2xl]&-w24px  --is-[data-size=2xl]&-h24px --is-[disabled]&-b-1d67px-solid-98A2B3 --is-[data-type=secondary]&-bc-98A2B3 lt df bsbb  w20px h20px br100p b-1d67px-white-solid"
            style=""></span>
        <span class=" ff-Inter ww-break-word ">Button CTA</span>
        <span class="rt btn-addon"></span>
    </button>
</div>
<div data-size="xxl" data-type="secondary" [data-type]>
    <div class="
    ac-wrapper
    _button-c-fff  _button-cp _all-bsbb  _button-p8px-12px  _button-bg-7F56D9  _button-bxs-0px-1px-2px-0160240400d05
      _button-br-8px  _button-jcc  _button-aic  _button-g-4px  _button-dif  _button-b1px-primary600-solid text-sm 
      _button-fw6 btn-md btn-lg btn-xl btn-2xl btn-xxl btn
    "
    class-btn="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"
    class-btn[--hover]="--is-[disabled]&-bgc-F2F4F7 --is-[disabled]&cna --is-[disabled]&-bc-EAECF0 b-1px-s-6941C6 bgc-6941C6 bxs-0px-1px-2px-0px-0160240400d05"
    class-btn-md="--is-[data-size=md]&-p10px-14px"
    class-btn-lg=" --is-[data-size-eql-lg]&-p10px-16px --is-[data-size=lg]&-text-md"
    class-btn-xl="--is-[data-size=xl]&-p12px-18px --is-[data-size=xl]&-g-6px --is-[data-size=xl]&-text-md"
    class-btn-xxl="--is-[data-size=xxl]&-p16px-22px --is-[data-size=xxl]&-g-10px --is-[data-size=xxl]&-text-lg"
    >

        <!-- Main Content -->
        <button
            class="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 btn-md btn-lg btn-xl btn-2xl btn-xxl btn"
            class-btn='--is-[data-type=secondary]&--hover-bgc-f9fafb --is-[data-type=secondary]&--hover-bc-d0d4dd  --is-[data-type=secondary]&bgc-fff --is-[data-type=secondary]&bc-d0d5dd --is-[data-type=secondary]&c-344054 --is-[disabled]&-bgc-F2F4F7 --is-[disabled]&-bc-EAECF0 --is-[disabled]&-c-98A2B3'
            class-btn[--hover]="--is-[disabled]&-bgc-F2F4F7 --is-[disabled]&cna --is-[disabled]&-bc-EAECF0 b-1px-s-6941C6 bgc-6941C6 bxs-0px-1px-2px-0px-0160240400d05"
            class-btn-md="--is-[data-size=md]&-p10px-14px"
            class-btn-lg=" --is-[data-size=lg]&-p10px-16px --is-[data-size=lg]&-text-md"
            class-btn-xl="--is-[data-size=xl]&-p12px-18px --is-[data-size=xl]&-g-6px --is-[data-size=xl]&-text-md"
            class-btn-xxl="--is-[data-size=xxl]&-p16px-22px --is-[data-size=xxl]&-g-10px --is-[data-size=xxl]&-text-lg"
            class-btn-2xl="--is-[data-size=2xl]&-p16px-22px --is-[data-size=2xl]&-g-10px --is-[data-size=2xl]&-text-lg"
            style="">
            <span class="btn-addon"
                class-btn-addon="--is-[data-size=xxl]&-w24px  --is-[data-size=xxl]&-h24px --is-[data-size=2xl]&-w24px  --is-[data-size=2xl]&-h24px --is-[disabled]&-b-1d67px-solid-98A2B3 --is-[data-type=secondary]&-bc-98A2B3 lt df bsbb  w20px h20px br100p b-1d67px-white-solid"
                style=""></span>
            <span class=" ff-Inter ww-break-word ">Button CTA</span>
            <span class="rt btn-addon"></span>
        </button>
        <!-- End Main Content -->
</div>
</div>