Skip to content

Instantly share code, notes, and snippets.

@jordienr

jordienr/button.css

Created June 10, 2023 12:03
Show Gist options
  • Save jordienr/fbfcd24de571bdd1c9415fb2ee46acf7 to your computer and use it in GitHub Desktop.
Save jordienr/fbfcd24de571bdd1c9415fb2ee46acf7 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jordienr created this gist Jun 10, 2023.
    54 changes: 54 additions & 0 deletions button.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,54 @@
    .btn {
    @apply flex w-full items-center justify-center gap-2 rounded-md border bg-white px-4 py-2 text-center font-medium tracking-wide text-slate-700 hover:bg-slate-50 sm:w-auto;
    }

    .btn.btn-icon {
    @apply inline-flex h-10 w-10 max-w-[40px] items-center border-none bg-transparent;
    }
    .btn.btn-icon:hover {
    @apply bg-orange-100 text-orange-500 transition-all;
    }
    .btn.btn-icon:hover svg {
    @apply text-orange-500 transition-all;
    }
    .btn.btn-icon svg {
    @apply h-5 w-5 min-w-[20px] text-slate-400;
    }

    .btn.btn-primary {
    @apply border border-transparent bg-black text-white transition-all;
    }
    .btn.btn-primary:hover {
    border: 1px solid theme("colors.orange.600");
    box-shadow: inset 0 1px 0px 0px theme("colors.orange.300");

    background: theme("colors.orange.500")
    linear-gradient(
    180deg,
    theme("colors.orange.400") 0%,
    theme("colors.orange.600") 100%
    );
    text-shadow: 0 -1px 0px theme("colors.orange.600");
    }
    .btn.btn-primary:active {
    transform: translateY(1px);
    box-shadow: none;
    }
    .btn svg {
    @apply h-5 w-5 text-slate-400;
    }
    .btn.btn-primary svg {
    @apply text-slate-100;
    }
    .btn.btn-text {
    @apply border-none text-slate-500 hover:text-slate-600;
    }
    .btn.btn-icon {
    @apply w-auto rounded-full px-3;
    }
    .btn.btn-red {
    @apply border border-red-600 bg-red-500 text-white shadow-inner shadow-red-400 drop-shadow-md hover:bg-red-500/90;
    }
    .btn.btn-primary-text {
    @apply border-none bg-transparent text-orange-500 hover:bg-white;
    }