fadgram-ui/components/buttons.css

Fadgram UI is a Tailwind CSS plugin that provides a set of custom utility classes to enhance your web development experience. This plugin is designed to work seamlessly with Tailwind CSS, allowing you to quickly and easily style your web applications. ![F

@layer components {
    .btn {
        @apply flex-space-2 justify-center;
        @apply text-white;
        @apply text-sm font-medium leading-none;
        @apply border border-inherit rounded-lg;
        @apply px-5 py-2.5;
        @apply focus:outline-hidden focus:ring-3;
        @apply cursor-pointer;
        @apply transition-colors;
        @apply appearance-none;

        &:disabled {
            @apply opacity-60 cursor-not-allowed;
        }

        &:active {
            @apply scale-[0.95] transition-transform ease-in-out;
        }

        &.pill {
            @apply rounded-full;
        }

        &.xxs,
        .btn-xxs {
            @apply text-xxs px-1.5 py-1 flex-space-1;
        }

        &.xs,
        &.btn-xs {
            @apply text-xs px-3 py-1.5 flex-space-1;
        }

        &.sm,
        &.btn-sm {
            @apply text-sm px-3 py-2 flex-space-1;
        }

        &.lg,
        &.btn-lg {
            @apply text-base px-5 py-3;
        }

        &.xl,
        &.btn-xl {
            @apply text-lg px-6 py-4;
        }

        &.xxl,
        &.btn-xxl {
            @apply text-xl px-8 py-6;
        }

        &.btn-light {
            @apply text-black;
        }
    }

    .btn-backtop {
        @apply fixed z-10 bottom-8 end-8 translate-y-96 transition-transform;

        &.show {
            @apply translate-y-0;
        }
    }
}

@utility btn-* {
    background-color: --value(--color-*);
    border-color: --value(--color-*);
    color: --value(--text-bg-*);

    &:hover {
        background-color: --value(--color-*-700);
        border-color: --value(--color-*-700);
    }

    &:focus {
        --tw-ring-color: --value(--color-*-300);
    }

    &.gradient {
        background-image: linear-gradient(to top left, --value(--color-*-500), --value(--color-*), --value(--color-*-700));

        &:hover {
            background-image: linear-gradient(to bottom right, --value(--color-*-500), --value(--color-*), --value(--color-*-700));
        }
    }
}

@utility btn-outline-* {
    @apply border focus:ring-0;
    background-color: transparent;
    border-color: --value(--color-*);
    color: --value(--color-*);

    @variant hover {
        background-color: --value(--color-*);
        color: --value(--color-bg-*);
    }
}