fadgram-ui/css/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

@utility 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;
  }
}

@utility 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-* {
  background-color: transparent;
  border-color: --value(--color- *) !important;
  color: --value(--color- *);

  @variant hover {
    background-color: --value(--color- *);
    color: --value(--color-bg- *);
  }
}
@utility btn-circle {
  @apply inline-flex items-center justify-center;
  @apply text-white;
  @apply text-sm font-medium leading-none;
  @apply border border-inherit rounded-full;
  @apply p-0;
  @apply focus:outline-hidden focus:ring-3;
  @apply cursor-pointer;
  @apply transition-colors;
  @apply appearance-none;
  @apply w-8 h-8;

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

  &:active {
    @apply scale-[0.95] transition-transform ease-in-out;
  }
}
@utility btn-circle-* {
  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);
  }
}
@utility btn-circle-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-circle-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- *);
  }
}
@utility btn-circle-sm {
  @apply text-xs w-6 h-6;
}