/* ============================================
   Creative CSS Buttons Collection
   v1.1.0
   7 button styles × 8 color variants
   ============================================ */

/* ── Base reset (optional, safe to remove) ── */
.btn-slice,
.btn-morph,
.btn-trace,
.btn-stamp,
.btn-liquid,
.btn-glitch,
.btn-icon-expand {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 1;
  user-select: none;
}


/* ============================================
   01. SLICE FILL
   A diagonal fill sweeps in from the left
   ============================================ */

.btn-slice {
  padding: 11px 28px;
  border: 1.5px solid #1a1a1a;
  background: transparent;
  color: #1a1a1a;
  position: relative;
  overflow: hidden;
  transition: color 0.35s ease;
}

.btn-slice::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #1a1a1a;
  transform: skewX(-12deg);
  transition: left 0.35s ease;
  z-index: 0;
}

.btn-slice:hover::before { left: -8%; }
.btn-slice:hover         { color: #fff; }
.btn-slice span          { position: relative; z-index: 1; }

/* Color variants */
.btn-slice--indigo              { border-color: #4F46E5; color: #4F46E5; }
.btn-slice--indigo::before      { background: #4F46E5; }
.btn-slice--indigo:hover        { color: #fff; }

.btn-slice--rose                { border-color: #E11D48; color: #E11D48; }
.btn-slice--rose::before        { background: #E11D48; }
.btn-slice--rose:hover          { color: #fff; }

.btn-slice--emerald             { border-color: #059669; color: #059669; }
.btn-slice--emerald::before     { background: #059669; }
.btn-slice--emerald:hover       { color: #fff; }

.btn-slice--teal                { border-color: #0D9488; color: #0D9488; }
.btn-slice--teal::before        { background: #0D9488; }
.btn-slice--teal:hover          { color: #fff; }

.btn-slice--amber               { border-color: #D97706; color: #D97706; }
.btn-slice--amber::before       { background: #D97706; }
.btn-slice--amber:hover         { color: #fff; }

.btn-slice--sky                 { border-color: #0284C7; color: #0284C7; }
.btn-slice--sky::before         { background: #0284C7; }
.btn-slice--sky:hover           { color: #fff; }

.btn-slice--violet              { border-color: #7C3AED; color: #7C3AED; }
.btn-slice--violet::before      { background: #7C3AED; }
.btn-slice--violet:hover        { color: #fff; }

.btn-slice--slate               { border-color: #475569; color: #475569; }
.btn-slice--slate::before       { background: #475569; }
.btn-slice--slate:hover         { color: #fff; }


/* ============================================
   02. PILL MORPH
   Rectangular → pill shape on hover
   ============================================ */

.btn-morph {
  padding: 11px 28px;
  border: none;
  background: #F0F0F0;
  color: #1a1a1a;
  border-radius: 4px;
  transition:
    background      0.3s ease,
    border-radius   0.4s cubic-bezier(.68, -0.6, .32, 1.6),
    transform       0.2s ease,
    color           0.3s ease;
}

.btn-morph:hover {
  background: #1a1a1a;
  color: #fff;
  border-radius: 50px;
  transform: scale(1.04);
}

/* Color variants */
.btn-morph--emerald       { background: #D1FAE5; color: #065F46; }
.btn-morph--emerald:hover { background: #065F46; color: #fff; }

.btn-morph--indigo        { background: #EEF2FF; color: #4338CA; }
.btn-morph--indigo:hover  { background: #4338CA; color: #fff; }

.btn-morph--rose          { background: #FFF1F2; color: #BE123C; }
.btn-morph--rose:hover    { background: #BE123C; color: #fff; }

.btn-morph--teal          { background: #CCFBF1; color: #0F766E; }
.btn-morph--teal:hover    { background: #0F766E; color: #fff; }

.btn-morph--amber         { background: #FEF3C7; color: #B45309; }
.btn-morph--amber:hover   { background: #B45309; color: #fff; }

.btn-morph--sky           { background: #E0F2FE; color: #0369A1; }
.btn-morph--sky:hover     { background: #0369A1; color: #fff; }

.btn-morph--violet        { background: #EDE9FE; color: #6D28D9; }
.btn-morph--violet:hover  { background: #6D28D9; color: #fff; }

.btn-morph--slate         { background: #F1F5F9; color: #334155; }
.btn-morph--slate:hover   { background: #334155; color: #fff; }


/* ============================================
   03. BORDER TRACE
   Border draws itself around the button
   ============================================ */

.btn-trace {
  padding: 11px 28px;
  background: transparent;
  border: none;
  color: #1a1a1a;
  position: relative;
}

.btn-trace::before,
.btn-trace::after {
  content: '';
  position: absolute;
  transition: all 0.4s ease;
}

/* Top + Bottom borders */
.btn-trace::before {
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}

/* Left + Right borders */
.btn-trace::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  border-left: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}

.btn-trace:hover::before { width: 100%; }
.btn-trace:hover::after  { height: 100%; }

/* Color variants — just set color on the element */
.btn-trace--indigo  { color: #4F46E5; }
.btn-trace--rose    { color: #E11D48; }
.btn-trace--emerald { color: #059669; }
.btn-trace--teal    { color: #0D9488; }
.btn-trace--amber   { color: #D97706; }
.btn-trace--sky     { color: #0284C7; }
.btn-trace--violet  { color: #7C3AED; }
.btn-trace--slate   { color: #475569; }


/* ============================================
   04. STAMP PRESS
   Hard offset shadow collapses on click
   ============================================ */

.btn-stamp {
  padding: 11px 28px;
  background: #1a1a1a;
  color: #fff;
  border: none;
  box-shadow: 4px 4px 0 #4F46E5;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-stamp:hover {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 #4F46E5;
}

.btn-stamp:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 #4F46E5;
}

/* Color variants */
.btn-stamp--coral              { background: #FF5A3C; box-shadow: 4px 4px 0 #1a1a1a; }
.btn-stamp--coral:hover        { box-shadow: 1px 1px 0 #1a1a1a; }
.btn-stamp--coral:active       { box-shadow: 0 0 0 #1a1a1a; }

.btn-stamp--indigo             { background: #4F46E5; box-shadow: 4px 4px 0 #1a1a1a; }
.btn-stamp--indigo:hover       { box-shadow: 1px 1px 0 #1a1a1a; }
.btn-stamp--indigo:active      { box-shadow: 0 0 0 #1a1a1a; }

.btn-stamp--emerald            { background: #059669; box-shadow: 4px 4px 0 #1a1a1a; }
.btn-stamp--emerald:hover      { box-shadow: 1px 1px 0 #1a1a1a; }
.btn-stamp--emerald:active     { box-shadow: 0 0 0 #1a1a1a; }

.btn-stamp--rose               { background: #E11D48; box-shadow: 4px 4px 0 #1a1a1a; }
.btn-stamp--rose:hover         { box-shadow: 1px 1px 0 #1a1a1a; }
.btn-stamp--rose:active        { box-shadow: 0 0 0 #1a1a1a; }

.btn-stamp--teal               { background: #0D9488; box-shadow: 4px 4px 0 #1a1a1a; }
.btn-stamp--teal:hover         { box-shadow: 1px 1px 0 #1a1a1a; }
.btn-stamp--teal:active        { box-shadow: 0 0 0 #1a1a1a; }

.btn-stamp--violet             { background: #7C3AED; box-shadow: 4px 4px 0 #1a1a1a; }
.btn-stamp--violet:hover       { box-shadow: 1px 1px 0 #1a1a1a; }
.btn-stamp--violet:active      { box-shadow: 0 0 0 #1a1a1a; }

.btn-stamp--amber              { background: #D97706; box-shadow: 4px 4px 0 #1a1a1a; }
.btn-stamp--amber:hover        { box-shadow: 1px 1px 0 #1a1a1a; }
.btn-stamp--amber:active       { box-shadow: 0 0 0 #1a1a1a; }

.btn-stamp--sky                { background: #0284C7; box-shadow: 4px 4px 0 #1a1a1a; }
.btn-stamp--sky:hover          { box-shadow: 1px 1px 0 #1a1a1a; }
.btn-stamp--sky:active         { box-shadow: 0 0 0 #1a1a1a; }


/* ============================================
   05. LIQUID RIPPLE
   A wave rises on hover inside a pill
   ============================================ */

.btn-liquid {
  padding: 11px 28px;
  background: #6366F1;
  color: #fff;
  border: none;
  border-radius: 50px;
  position: relative;
  overflow: hidden;
  transition: color 0.3s;
}

.btn-liquid::before {
  content: '';
  position: absolute;
  bottom: -60%;
  left: 50%;
  transform: translateX(-50%);
  width: 130%;
  height: 130%;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 45%;
  transition: bottom 0.6s ease, transform 0.6s ease;
}

.btn-liquid:hover::before {
  bottom: -10%;
  transform: translateX(-50%) rotate(20deg);
}

.btn-liquid span { position: relative; z-index: 1; }

/* Color variants */
.btn-liquid--rose    { background: #E11D48; }
.btn-liquid--teal    { background: #0D9488; }
.btn-liquid--amber   { background: #D97706; }
.btn-liquid--emerald { background: #059669; }
.btn-liquid--sky     { background: #0284C7; }
.btn-liquid--violet  { background: #7C3AED; }
.btn-liquid--slate   { background: #475569; }


/* ============================================
   06. GLITCH TEXT
   RGB channel split on hover
   ============================================ */

.btn-glitch {
  padding: 11px 28px;
  background: #000;
  color: #fff;
  border: none;
  letter-spacing: 0.08em;
}

.btn-glitch .g-text {
  position: relative;
  display: inline-block;
}

.btn-glitch:hover .g-text::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 2px;
  color: #0ff;
  clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%);
  animation: glitch-top 0.3s steps(1) infinite;
}

.btn-glitch:hover .g-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: -2px;
  color: #f0f;
  clip-path: polygon(0 55%, 100% 55%, 100% 75%, 0 75%);
  animation: glitch-bot 0.3s steps(1) infinite 0.1s;
}

@keyframes glitch-top {
  0%, 100% { transform: translateX(0); }
  33%       { transform: translateX(-2px); }
  66%       { transform: translateX(3px); }
}

@keyframes glitch-bot {
  0%, 100% { transform: translateX(0); }
  33%       { transform: translateX(3px); }
  66%       { transform: translateX(-2px); }
}

/* Color variants */
.btn-glitch--indigo  { background: #4F46E5; }
.btn-glitch--rose    { background: #E11D48; }
.btn-glitch--teal    { background: #0D9488; }
.btn-glitch--emerald { background: #059669; }
.btn-glitch--amber   { background: #D97706; }
.btn-glitch--sky     { background: #0284C7; }
.btn-glitch--violet  { background: #7C3AED; }
.btn-glitch--slate   { background: #475569; }


/* ============================================
   07. ICON EXPAND
   Icon slides in from the left on hover
   ============================================ */

.btn-icon-expand {
  padding: 11px 20px;
  background: transparent;
  color: #1a1a1a;
  border: 1.5px solid #d1d5db;
  gap: 0;
  overflow: hidden;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}

.btn-icon-expand .b-icon {
  display: inline-block;
  width: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    width   0.35s cubic-bezier(.68, -0.6, .32, 1.6),
    opacity 0.25s ease,
    margin  0.35s;
  font-size: 17px;
  line-height: 1;
}

.btn-icon-expand:hover {
  border-color: #4F46E5;
  color: #4F46E5;
  background: #EEF2FF;
}

.btn-icon-expand:hover .b-icon {
  width: 20px;
  opacity: 1;
  margin-right: 6px;
}

/* Color variants */
.btn-icon-expand--emerald:hover {
  border-color: #059669;
  color: #059669;
  background: #ECFDF5;
}

.btn-icon-expand--rose:hover {
  border-color: #E11D48;
  color: #E11D48;
  background: #FFF1F2;
}

.btn-icon-expand--teal:hover {
  border-color: #0D9488;
  color: #0D9488;
  background: #F0FDFA;
}

.btn-icon-expand--amber:hover {
  border-color: #D97706;
  color: #D97706;
  background: #FFFBEB;
}

.btn-icon-expand--sky:hover {
  border-color: #0284C7;
  color: #0284C7;
  background: #F0F9FF;
}

.btn-icon-expand--violet:hover {
  border-color: #7C3AED;
  color: #7C3AED;
  background: #F5F3FF;
}

.btn-icon-expand--slate:hover {
  border-color: #475569;
  color: #475569;
  background: #F8FAFC;
}