tw-runner/mysite/assets/css/base/button.css

Run and manage Tower Website projects with this utility.

@layer base {
  .btn {
    @apply grid place-content-center cursor-pointer font-extralight px-4 py-2 rounded-lg transition-all duration-200;
    /* stroke: var(--color-ground-text); */
  }

  /* Button Sizes */
  .btn-sm {
    @apply px-2 py-1;
  }
  .btn-md {
    @apply px-4 py-2;
  }
  .btn-lg {
    @apply px-6 py-3 text-lg;
  }
  .btn-full {
    @apply w-full text-center py-4;
  }

  /* Fully Rounded */
  .btn-rounded {
    @apply rounded-full p-2;
  }

  /* Hyperlink Style */
  .btn-link {
    @apply underline
  }

  /* Button Backgrounds */
  .btn-mute {
    @apply bg-ground/20 dark:bg-ground-secondary-dark/75 hover:bg-ground/50 dark:hover:bg-ground-secondary-dark/50 text-ground-text dark:text-ground-text;
  }
  .btn-base {
    @apply bg-ground/65 dark:bg-ground-secondary-dark/75 hover:bg-ground/50 dark:hover:bg-ground-secondary-dark/50 text-ground-text dark:text-ground-text;
  }
  .btn-primary {
    @apply bg-primary text-primary-text hover:bg-primary-highlight hover:text-primary-highlight-text;
  }
  .btn-secondary {
    @apply bg-secondary text-secondary-text;
  }
  .btn-negative {
    @apply bg-ground/5 text-negative-text hover:bg-ground;
  }
  .btn-primary-highlight {
    @apply bg-primary-highlight text-primary-highlight-text hover:bg-primary hover:text-primary-text;
  }
  .btn-ground {
    @apply bg-ground text-ground-text;
  }
  .btn-ground-primary {
    @apply bg-ground-primary text-ground-primary-text;
  }
  .btn-ground-secondary {
    @apply bg-ground-secondary text-ground-secondary-text;
  }
  .btn-success {
    @apply bg-success text-success-text;
  }
  .btn-warning {
    @apply bg-warning text-warning-text;
  }
  .btn-info {
    @apply bg-info text-info-text;
  }
}