Icon Button

<!-- Icon Button — minimal sun↔moon morph (active state shown on click).
     Toggle from JS by setting a body/html class. -->
<button class="nuda-tibtn" type="button" aria-label="Toggle theme">
  <span class="nuda-tibtn__inner">
    <svg class="nuda-tibtn__sun" viewBox="0 0 24 24" fill="currentColor">
      <circle cx="12" cy="12" r="4" />
    </svg>
    <span class="nuda-tibtn__moon"></span>
  </span>
</button>

/* Icon Button
   Compact circular toggle: sun shrinks, moon (a circle with inset shadow) grows.
   Customize: --tibtn-accent */

.nuda-tibtn {
  --tibtn-accent: #e4ff54;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.25s, background 0.25s, border-color 0.25s;
  color: #fafafa;
  overflow: hidden;
  position: relative;
}

.nuda-tibtn:hover {
  background: rgba(228, 255, 84, 0.06);
  border-color: rgba(228, 255, 84, 0.3);
  transform: rotate(45deg);
}

.nuda-tibtn__inner {
  position: relative;
  width: 16px;
  height: 16px;
}

.nuda-tibtn__sun {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--tibtn-accent);
  transition: transform 0.4s, opacity 0.3s;
  filter: drop-shadow(0 0 4px rgba(228, 255, 84, 0.4));
}

.nuda-tibtn__moon {
  position: absolute;
  inset: 0;
  width: 16px;
  height: 16px;
  background: #fafafa;
  border-radius: 50%;
  box-shadow: inset -4px -3px 0 0 currentColor;
  color: rgba(255, 255, 255, 0.04);
  transform: scale(0);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Toggle by adding .is-dark from JS (or :active for demo) */
.nuda-tibtn.is-dark .nuda-tibtn__sun,
.nuda-tibtn:active .nuda-tibtn__sun  { transform: scale(0); }
.nuda-tibtn.is-dark .nuda-tibtn__moon,
.nuda-tibtn:active .nuda-tibtn__moon { transform: scale(1); }