pretty orange button with tailwind

button.css

.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;
}