13 CSS Neumorphism & Soft UI Designs11 / 13

Pure CSSMIT licensed

Soft UI Form Controls

A pure-CSS showcase of soft-UI form controls with zero JavaScript. Style A: concave dimple radios — a sunken circle with a dot that bounces in using cubic-bezier(0.34, 1.56, 0.64, 1) spring easing on :checked. Style B: horizontal pill-select groups + a vertical icon pill variant — both invert from inset-track to extruded-active on :checked. Style C: card radios with a floating badge that fills from gray to indigo and reveals a white center dot. Checkboxes mirror the pattern — dimple box with CSS-drawn checkmark (border-right + border-bottom), stamp pills with animated tick circles, and card checkboxes with a green gradient fill. Raleway + DM Mono. Best for design-system docs, form pattern libraries, settings panels.

Published

Live Demo
Try it

The code

<section class="nm-ctl" aria-label="Soft UI form controls showcase">
  <div class="card">

    <div class="sec">
      <div class="sec-head">
        <div class="sec-title">Radio Buttons</div>
        <div class="sec-tag">Custom CSS · No JavaScript</div>
      </div>
      <div class="controls-row">

        <div class="col-stack">
          <div class="sub-tag">Style A — Concave Dimple</div>
          <div class="radio-classic">
            <label class="rc-item">
              <input class="rc-input" type="radio" name="nm-ctl-rA" checked />
              <span class="rc-circle" aria-hidden="true"></span>
              <span class="rc-label">Sans-serif<span class="rc-sublabel">Clean · Modern</span></span>
            </label>
            <label class="rc-item">
              <input class="rc-input" type="radio" name="nm-ctl-rA" />
              <span class="rc-circle" aria-hidden="true"></span>
              <span class="rc-label">Serif<span class="rc-sublabel">Refined · Editorial</span></span>
            </label>
            <label class="rc-item">
              <input class="rc-input" type="radio" name="nm-ctl-rA" />
              <span class="rc-circle" aria-hidden="true"></span>
              <span class="rc-label">Monospace<span class="rc-sublabel">Code · Precise</span></span>
            </label>
            <label class="rc-item">
              <input class="rc-input" type="radio" name="nm-ctl-rA" />
              <span class="rc-circle" aria-hidden="true"></span>
              <span class="rc-label">Display<span class="rc-sublabel">Bold · Expressive</span></span>
            </label>
          </div>
        </div>

        <div class="col-stack">
          <div class="sub-tag">Style B — Pill Segment</div>
          <div class="pill-group">
            <input class="pill-input" type="radio" name="nm-ctl-rB1" id="nm-ctl-rB1-d" checked />
            <label class="pill-label" for="nm-ctl-rB1-d">Day</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB1" id="nm-ctl-rB1-w" />
            <label class="pill-label" for="nm-ctl-rB1-w">Week</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB1" id="nm-ctl-rB1-m" />
            <label class="pill-label" for="nm-ctl-rB1-m">Month</label>
          </div>
          <div class="pill-group">
            <input class="pill-input" type="radio" name="nm-ctl-rB2" id="nm-ctl-rB2-s" checked />
            <label class="pill-label" for="nm-ctl-rB2-s">S</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB2" id="nm-ctl-rB2-m" />
            <label class="pill-label" for="nm-ctl-rB2-m">M</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB2" id="nm-ctl-rB2-l" />
            <label class="pill-label" for="nm-ctl-rB2-l">L</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB2" id="nm-ctl-rB2-xl" />
            <label class="pill-label" for="nm-ctl-rB2-xl">XL</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB2" id="nm-ctl-rB2-2xl" />
            <label class="pill-label" for="nm-ctl-rB2-2xl">2XL</label>
          </div>
          <div class="pill-group-v">
            <input class="pill-input" type="radio" name="nm-ctl-rB3" id="nm-ctl-rB3-1" />
            <label class="pill-label-v" for="nm-ctl-rB3-1"><span class="pill-icon" aria-hidden="true">🎨</span>Design</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB3" id="nm-ctl-rB3-2" checked />
            <label class="pill-label-v" for="nm-ctl-rB3-2"><span class="pill-icon" aria-hidden="true">⚡</span>Develop</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB3" id="nm-ctl-rB3-3" />
            <label class="pill-label-v" for="nm-ctl-rB3-3"><span class="pill-icon" aria-hidden="true">🚀</span>Deploy</label>
          </div>
        </div>

        <div class="col-stack col-stack-flex">
          <div class="sub-tag">Style C — Card Select</div>
          <div class="card-radio-group">
            <input class="card-input" type="radio" name="nm-ctl-rC" id="nm-ctl-rC-1" />
            <label class="card-label" for="nm-ctl-rC-1">
              <span class="card-icon" aria-hidden="true">🌱</span>
              <span class="card-title">Starter</span>
              <span class="card-desc">For personal projects</span>
              <span class="card-price">Free</span>
            </label>
            <input class="card-input" type="radio" name="nm-ctl-rC" id="nm-ctl-rC-2" checked />
            <label class="card-label" for="nm-ctl-rC-2">
              <span class="card-icon" aria-hidden="true">⚡</span>
              <span class="card-title">Pro</span>
              <span class="card-desc">Teams up to 10</span>
              <span class="card-price">$12/mo</span>
            </label>
            <input class="card-input" type="radio" name="nm-ctl-rC" id="nm-ctl-rC-3" />
            <label class="card-label" for="nm-ctl-rC-3">
              <span class="card-icon" aria-hidden="true">🏢</span>
              <span class="card-title">Enterprise</span>
              <span class="card-desc">Unlimited seats</span>
              <span class="card-price">Custom</span>
            </label>
          </div>
        </div>
      </div>
    </div>

    <div class="div-line" aria-hidden="true"></div>

    <div class="sec">
      <div class="sec-head">
        <div class="sec-title">Checkboxes</div>
        <div class="sec-tag">Pure CSS inset · accent fill transition</div>
      </div>
      <div class="controls-row">

        <div class="col-stack">
          <div class="sub-tag">Style A — Dimple Box</div>
          <div class="check-classic">
            <label class="cb-item">
              <input class="cb-input" type="checkbox" checked />
              <span class="cb-box" aria-hidden="true"><span class="cb-check"></span></span>
              <span class="cb-txt">Dark mode support</span>
            </label>
            <label class="cb-item">
              <input class="cb-input" type="checkbox" checked />
              <span class="cb-box" aria-hidden="true"><span class="cb-check"></span></span>
              <span class="cb-txt">Keyboard navigation</span>
            </label>
            <label class="cb-item">
              <input class="cb-input" type="checkbox" />
              <span class="cb-box" aria-hidden="true"><span class="cb-check"></span></span>
              <span class="cb-txt">Analytics tracking</span>
            </label>
            <label class="cb-item">
              <input class="cb-input" type="checkbox" />
              <span class="cb-box" aria-hidden="true"><span class="cb-check"></span></span>
              <span class="cb-txt">Marketing emails</span>
            </label>
          </div>
        </div>

        <div class="col-stack col-stack-flex">
          <div class="sub-tag">Style B — Stamp Pill</div>
          <div class="stamp-group">
            <input class="stamp-input" type="checkbox" id="nm-ctl-s1" checked />
            <label class="stamp-label" for="nm-ctl-s1">
              <span class="stamp-tick" aria-hidden="true"></span>
              React
            </label>
            <input class="stamp-input" type="checkbox" id="nm-ctl-s2" checked />
            <label class="stamp-label" for="nm-ctl-s2">
              <span class="stamp-tick" aria-hidden="true"></span>
              TypeScript
            </label>
            <input class="stamp-input" type="checkbox" id="nm-ctl-s3" />
            <label class="stamp-label" for="nm-ctl-s3">
              <span class="stamp-tick" aria-hidden="true"></span>
              Vue
            </label>
            <input class="stamp-input" type="checkbox" id="nm-ctl-s4" />
            <label class="stamp-label" for="nm-ctl-s4">
              <span class="stamp-tick" aria-hidden="true"></span>
              Angular
            </label>
            <input class="stamp-input" type="checkbox" id="nm-ctl-s5" checked />
            <label class="stamp-label" for="nm-ctl-s5">
              <span class="stamp-tick" aria-hidden="true"></span>
              TailwindCSS
            </label>
            <input class="stamp-input" type="checkbox" id="nm-ctl-s6" />
            <label class="stamp-label" for="nm-ctl-s6">
              <span class="stamp-tick" aria-hidden="true"></span>
              GraphQL
            </label>
            <input class="stamp-input" type="checkbox" id="nm-ctl-s7" />
            <label class="stamp-label" for="nm-ctl-s7">
              <span class="stamp-tick" aria-hidden="true"></span>
              Node.js
            </label>
            <input class="stamp-input" type="checkbox" id="nm-ctl-s8" checked />
            <label class="stamp-label" for="nm-ctl-s8">
              <span class="stamp-tick" aria-hidden="true"></span>
              Figma
            </label>
          </div>
        </div>

        <div class="col-stack">
          <div class="sub-tag">Style C — Card Check</div>
          <div class="card-check-group">
            <input class="cc-input" type="checkbox" id="nm-ctl-cc1" checked />
            <label class="cc-label" for="nm-ctl-cc1">
              <span class="cc-sq" aria-hidden="true"><span class="cc-sq-inner">✓</span></span>
              <span class="cc-text">
                <span class="cc-name">Sync across devices</span>
                <span class="cc-detail">iCloud · Google Drive</span>
              </span>
              <span class="cc-badge">ON</span>
            </label>
            <input class="cc-input" type="checkbox" id="nm-ctl-cc2" checked />
            <label class="cc-label" for="nm-ctl-cc2">
              <span class="cc-sq" aria-hidden="true"><span class="cc-sq-inner">✓</span></span>
              <span class="cc-text">
                <span class="cc-name">Offline mode</span>
                <span class="cc-detail">Cache on local storage</span>
              </span>
              <span class="cc-badge">ON</span>
            </label>
            <input class="cc-input" type="checkbox" id="nm-ctl-cc3" />
            <label class="cc-label" for="nm-ctl-cc3">
              <span class="cc-sq" aria-hidden="true"><span class="cc-sq-inner">✓</span></span>
              <span class="cc-text">
                <span class="cc-name">Crash reporting</span>
                <span class="cc-detail">Send to Sentry · Firebase</span>
              </span>
              <span class="cc-badge">OFF</span>
            </label>
          </div>
        </div>

      </div>
    </div>

  </div>
</section>
/* ─── 11 Soft UI Form Controls — pure CSS showcase ───────────────── */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

.nm-ctl {
  --nm-ctl-bg: #f0ebe2;
  --nm-ctl-sd: #d0cbbf;
  --nm-ctl-sl: #fffdf8;
  --nm-ctl-ib: #e8e2d8;
  --nm-ctl-acc: #5c6bc0;
  --nm-ctl-ac2: #8c9ce0;
  --nm-ctl-ac3: #3a4a9a;
  --nm-ctl-grn: #4a8a68;
  --nm-ctl-txt: #6a6258;
  --nm-ctl-txt2: #1a1510;
  --nm-ctl-neu-sm: 5px 5px 12px var(--nm-ctl-sd), -5px -5px 12px var(--nm-ctl-sl);
  --nm-ctl-neu-sm-in: inset 4px 4px 9px var(--nm-ctl-sd), inset -4px -4px 9px var(--nm-ctl-sl);
  position: relative;
  width: 100%;
  min-height: 880px;
  background: var(--nm-ctl-bg);
  font-family: 'Raleway', system-ui, sans-serif;
  color: var(--nm-ctl-txt);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

.nm-ctl *,
.nm-ctl *::before,
.nm-ctl *::after {
  box-sizing: border-box;
}

.nm-ctl .card {
  position: relative;
  width: 100%;
  max-width: 860px;
  background: var(--nm-ctl-bg);
  border-radius: 40px;
  padding: 40px 36px;
  box-shadow: 20px 20px 50px var(--nm-ctl-sd), -20px -20px 50px var(--nm-ctl-sl);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.nm-ctl .sec {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nm-ctl .sec-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.nm-ctl .sec-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--nm-ctl-txt2);
  letter-spacing: 0.3px;
}

.nm-ctl .sec-tag {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--nm-ctl-txt);
  opacity: 0.5;
}

.nm-ctl .sub-tag {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--nm-ctl-txt);
  opacity: 0.5;
  margin-bottom: 4px;
}

.nm-ctl .controls-row {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.nm-ctl .col-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nm-ctl .col-stack-flex {
  flex: 1;
  min-width: 180px;
}

.nm-ctl .div-line {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--nm-ctl-sd), transparent);
  opacity: 0.5;
}
/* Style A — Classic radio */

.nm-ctl .radio-classic {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 160px;
}

.nm-ctl .rc-item {
  display: flex;
  align-items: center;
  gap: 13px;
  cursor: pointer;
  user-select: none;
}

.nm-ctl .rc-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nm-ctl .rc-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm-in);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: box-shadow 0.2s ease;
  position: relative;
}

.nm-ctl .rc-circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--nm-ctl-acc);
  box-shadow: 0 0 8px rgba(92, 107, 192, 0.5);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nm-ctl .rc-input:checked ~ .rc-circle::after {
  transform: translate(-50%, -50%) scale(1);
}

.nm-ctl .rc-input:checked ~ .rc-circle {
  box-shadow: var(--nm-ctl-neu-sm);
}

.nm-ctl .rc-label {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  font-weight: 600;
  color: var(--nm-ctl-txt2);
  transition: color 0.2s;
  line-height: 1.3;
}

.nm-ctl .rc-item:hover .rc-label {
  color: var(--nm-ctl-acc);
}

.nm-ctl .rc-sublabel {
  font-size: 10px;
  color: var(--nm-ctl-txt);
  font-weight: 400;
  margin-top: 1px;
}
/* Style B — Pill group */

.nm-ctl .pill-group {
  display: flex;
  background: var(--nm-ctl-ib);
  border-radius: 20px;
  padding: 5px;
  box-shadow: var(--nm-ctl-neu-sm-in);
  gap: 4px;
}

.nm-ctl .pill-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nm-ctl .pill-label {
  flex: 1;
  padding: 9px 14px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 700;
  color: var(--nm-ctl-txt);
  cursor: pointer;
  text-align: center;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.nm-ctl .pill-input:checked + .pill-label {
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm);
  color: var(--nm-ctl-acc);
}

.nm-ctl .pill-group-v {
  display: flex;
  flex-direction: column;
  background: var(--nm-ctl-ib);
  border-radius: 18px;
  padding: 5px;
  box-shadow: var(--nm-ctl-neu-sm-in);
  gap: 4px;
  min-width: 160px;
}

.nm-ctl .pill-label-v {
  padding: 9px 14px;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 700;
  color: var(--nm-ctl-txt);
  cursor: pointer;
  transition: all 0.22s;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nm-ctl .pill-input:checked + .pill-label-v {
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm);
  color: var(--nm-ctl-acc);
}

.nm-ctl .pill-icon {
  font-size: 16px;
}
/* Style C — Card radio */

.nm-ctl .card-radio-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.nm-ctl .card-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nm-ctl .card-label {
  flex: 1;
  background: var(--nm-ctl-bg);
  border-radius: 18px;
  padding: 16px 12px;
  box-shadow: var(--nm-ctl-neu-sm);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: all 0.22s ease;
  min-width: 100px;
  position: relative;
}

.nm-ctl .card-label:hover {
  transform: translateY(-2px);
  box-shadow: 8px 8px 20px var(--nm-ctl-sd), -8px -8px 20px var(--nm-ctl-sl);
}

.nm-ctl .card-input:checked + .card-label {
  box-shadow: var(--nm-ctl-neu-sm-in);
}

.nm-ctl .card-label::before {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm-in);
  transition: all 0.2s;
}

.nm-ctl .card-input:checked + .card-label::before {
  background: var(--nm-ctl-acc);
  box-shadow: 0 0 8px rgba(92, 107, 192, 0.4);
}

.nm-ctl .card-label::after {
  content: '';
  position: absolute;
  top: 14px;
  right: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nm-ctl .card-input:checked + .card-label::after {
  transform: scale(1);
}

.nm-ctl .card-icon {
  font-size: 24px;
}

.nm-ctl .card-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--nm-ctl-txt2);
  letter-spacing: 0.3px;
}

.nm-ctl .card-desc {
  font-size: 10px;
  color: var(--nm-ctl-txt);
  text-align: center;
  line-height: 1.4;
}

.nm-ctl .card-price {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--nm-ctl-acc);
  margin-top: 2px;
}
/* Checkboxes Style A — classic box */

.nm-ctl .check-classic {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 180px;
}

.nm-ctl .cb-item {
  display: flex;
  align-items: center;
  gap: 13px;
  cursor: pointer;
  user-select: none;
}

.nm-ctl .cb-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nm-ctl .cb-box {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm-in);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
  overflow: hidden;
  position: relative;
}

.nm-ctl .cb-check {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0) rotate(20deg);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nm-ctl .cb-check::before {
  content: '';
  width: 5px;
  height: 9px;
  border-right: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(45deg);
  margin-top: -4px;
}

.nm-ctl .cb-input:checked ~ .cb-box {
  background: linear-gradient(145deg, var(--nm-ctl-acc), var(--nm-ctl-ac3));
  box-shadow: 3px 3px 8px rgba(92, 107, 192, 0.35), -2px -2px 6px var(--nm-ctl-sl);
}

.nm-ctl .cb-input:checked ~ .cb-box .cb-check {
  transform: scale(1) rotate(0deg);
}

.nm-ctl .cb-txt {
  font-size: 13px;
  font-weight: 600;
  color: var(--nm-ctl-txt2);
  transition: color 0.2s;
  line-height: 1.3;
}

.nm-ctl .cb-item:hover .cb-txt {
  color: var(--nm-ctl-acc);
}
/* Checkboxes Style B — stamp pill */

.nm-ctl .stamp-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.nm-ctl .stamp-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nm-ctl .stamp-label {
  padding: 9px 16px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  color: var(--nm-ctl-txt);
  cursor: pointer;
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  user-select: none;
}

.nm-ctl .stamp-label:hover {
  transform: translateY(-1px);
  color: var(--nm-ctl-acc);
}

.nm-ctl .stamp-input:checked + .stamp-label {
  box-shadow: var(--nm-ctl-neu-sm-in);
  color: var(--nm-ctl-acc);
  font-weight: 800;
}

.nm-ctl .stamp-tick {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm-in);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.nm-ctl .stamp-input:checked + .stamp-label .stamp-tick {
  background: var(--nm-ctl-acc);
  box-shadow: 0 0 6px rgba(92, 107, 192, 0.4);
  color: #fff;
  font-size: 10px;
}

.nm-ctl .stamp-input:checked + .stamp-label .stamp-tick::after {
  content: '\2713';
}
/* Checkboxes Style C — card check */

.nm-ctl .card-check-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 240px;
}

.nm-ctl .cc-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nm-ctl .cc-label {
  background: var(--nm-ctl-bg);
  border-radius: 16px;
  padding: 13px 16px;
  box-shadow: var(--nm-ctl-neu-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.2s;
  user-select: none;
}

.nm-ctl .cc-label:hover {
  box-shadow: 7px 7px 16px var(--nm-ctl-sd), -7px -7px 16px var(--nm-ctl-sl);
}

.nm-ctl .cc-input:checked + .cc-label {
  box-shadow: var(--nm-ctl-neu-sm-in);
}

.nm-ctl .cc-sq {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm-in);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.nm-ctl .cc-input:checked + .cc-label .cc-sq {
  background: linear-gradient(145deg, var(--nm-ctl-grn), #2a6a48);
  box-shadow: 2px 2px 6px rgba(74, 138, 104, 0.4);
}

.nm-ctl .cc-sq-inner {
  transform: scale(0);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-size: 12px;
  color: #fff;
}

.nm-ctl .cc-input:checked + .cc-label .cc-sq-inner {
  transform: scale(1);
}

.nm-ctl .cc-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.nm-ctl .cc-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--nm-ctl-txt2);
}

.nm-ctl .cc-detail {
  font-size: 10px;
  color: var(--nm-ctl-txt);
  margin-top: 2px;
}

.nm-ctl .cc-badge {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--nm-ctl-txt);
  padding: 3px 8px;
  background: var(--nm-ctl-ib);
  border-radius: 8px;
  box-shadow: var(--nm-ctl-neu-sm-in);
}

@media (prefers-reduced-motion: reduce) {
  .nm-ctl .rc-circle::after,
    .nm-ctl .pill-label,
    .nm-ctl .pill-label-v,
    .nm-ctl .card-label,
    .nm-ctl .card-label::after,
    .nm-ctl .cb-box,
    .nm-ctl .cb-check,
    .nm-ctl .stamp-label,
    .nm-ctl .cc-label,
    .nm-ctl .cc-sq-inner {
    transition: none;
    animation: none;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Neumorphism & Soft UI Design from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Soft UI Form Controls
Source: https://codefronts.com/design-styles/css-neumorphism/soft-ui-form-controls/

A pure-CSS showcase of soft-UI form controls with zero JavaScript. Style A: concave dimple radios — a sunken circle with a dot that bounces in using cubic-bezier(0.34, 1.56, 0.64, 1) spring easing on :checked. Style B: horizontal pill-select groups + a vertical icon pill variant — both invert from inset-track to extruded-active on :checked. Style C: card radios with a floating badge that fills from gray to indigo and reveals a white center dot. Checkboxes mirror the pattern — dimple box with CSS-drawn checkmark (border-right + border-bottom), stamp pills with animated tick circles, and card checkboxes with a green gradient fill. Raleway + DM Mono. Best for design-system docs, form pattern libraries, settings panels.
## HTML
```html
<section class="nm-ctl" aria-label="Soft UI form controls showcase">
  <div class="card">

    <div class="sec">
      <div class="sec-head">
        <div class="sec-title">Radio Buttons</div>
        <div class="sec-tag">Custom CSS · No JavaScript</div>
      </div>
      <div class="controls-row">

        <div class="col-stack">
          <div class="sub-tag">Style A — Concave Dimple</div>
          <div class="radio-classic">
            <label class="rc-item">
              <input class="rc-input" type="radio" name="nm-ctl-rA" checked />
              <span class="rc-circle" aria-hidden="true"></span>
              <span class="rc-label">Sans-serif<span class="rc-sublabel">Clean · Modern</span></span>
            </label>
            <label class="rc-item">
              <input class="rc-input" type="radio" name="nm-ctl-rA" />
              <span class="rc-circle" aria-hidden="true"></span>
              <span class="rc-label">Serif<span class="rc-sublabel">Refined · Editorial</span></span>
            </label>
            <label class="rc-item">
              <input class="rc-input" type="radio" name="nm-ctl-rA" />
              <span class="rc-circle" aria-hidden="true"></span>
              <span class="rc-label">Monospace<span class="rc-sublabel">Code · Precise</span></span>
            </label>
            <label class="rc-item">
              <input class="rc-input" type="radio" name="nm-ctl-rA" />
              <span class="rc-circle" aria-hidden="true"></span>
              <span class="rc-label">Display<span class="rc-sublabel">Bold · Expressive</span></span>
            </label>
          </div>
        </div>

        <div class="col-stack">
          <div class="sub-tag">Style B — Pill Segment</div>
          <div class="pill-group">
            <input class="pill-input" type="radio" name="nm-ctl-rB1" id="nm-ctl-rB1-d" checked />
            <label class="pill-label" for="nm-ctl-rB1-d">Day</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB1" id="nm-ctl-rB1-w" />
            <label class="pill-label" for="nm-ctl-rB1-w">Week</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB1" id="nm-ctl-rB1-m" />
            <label class="pill-label" for="nm-ctl-rB1-m">Month</label>
          </div>
          <div class="pill-group">
            <input class="pill-input" type="radio" name="nm-ctl-rB2" id="nm-ctl-rB2-s" checked />
            <label class="pill-label" for="nm-ctl-rB2-s">S</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB2" id="nm-ctl-rB2-m" />
            <label class="pill-label" for="nm-ctl-rB2-m">M</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB2" id="nm-ctl-rB2-l" />
            <label class="pill-label" for="nm-ctl-rB2-l">L</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB2" id="nm-ctl-rB2-xl" />
            <label class="pill-label" for="nm-ctl-rB2-xl">XL</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB2" id="nm-ctl-rB2-2xl" />
            <label class="pill-label" for="nm-ctl-rB2-2xl">2XL</label>
          </div>
          <div class="pill-group-v">
            <input class="pill-input" type="radio" name="nm-ctl-rB3" id="nm-ctl-rB3-1" />
            <label class="pill-label-v" for="nm-ctl-rB3-1"><span class="pill-icon" aria-hidden="true">🎨</span>Design</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB3" id="nm-ctl-rB3-2" checked />
            <label class="pill-label-v" for="nm-ctl-rB3-2"><span class="pill-icon" aria-hidden="true">⚡</span>Develop</label>
            <input class="pill-input" type="radio" name="nm-ctl-rB3" id="nm-ctl-rB3-3" />
            <label class="pill-label-v" for="nm-ctl-rB3-3"><span class="pill-icon" aria-hidden="true">🚀</span>Deploy</label>
          </div>
        </div>

        <div class="col-stack col-stack-flex">
          <div class="sub-tag">Style C — Card Select</div>
          <div class="card-radio-group">
            <input class="card-input" type="radio" name="nm-ctl-rC" id="nm-ctl-rC-1" />
            <label class="card-label" for="nm-ctl-rC-1">
              <span class="card-icon" aria-hidden="true">🌱</span>
              <span class="card-title">Starter</span>
              <span class="card-desc">For personal projects</span>
              <span class="card-price">Free</span>
            </label>
            <input class="card-input" type="radio" name="nm-ctl-rC" id="nm-ctl-rC-2" checked />
            <label class="card-label" for="nm-ctl-rC-2">
              <span class="card-icon" aria-hidden="true">⚡</span>
              <span class="card-title">Pro</span>
              <span class="card-desc">Teams up to 10</span>
              <span class="card-price">$12/mo</span>
            </label>
            <input class="card-input" type="radio" name="nm-ctl-rC" id="nm-ctl-rC-3" />
            <label class="card-label" for="nm-ctl-rC-3">
              <span class="card-icon" aria-hidden="true">🏢</span>
              <span class="card-title">Enterprise</span>
              <span class="card-desc">Unlimited seats</span>
              <span class="card-price">Custom</span>
            </label>
          </div>
        </div>
      </div>
    </div>

    <div class="div-line" aria-hidden="true"></div>

    <div class="sec">
      <div class="sec-head">
        <div class="sec-title">Checkboxes</div>
        <div class="sec-tag">Pure CSS inset · accent fill transition</div>
      </div>
      <div class="controls-row">

        <div class="col-stack">
          <div class="sub-tag">Style A — Dimple Box</div>
          <div class="check-classic">
            <label class="cb-item">
              <input class="cb-input" type="checkbox" checked />
              <span class="cb-box" aria-hidden="true"><span class="cb-check"></span></span>
              <span class="cb-txt">Dark mode support</span>
            </label>
            <label class="cb-item">
              <input class="cb-input" type="checkbox" checked />
              <span class="cb-box" aria-hidden="true"><span class="cb-check"></span></span>
              <span class="cb-txt">Keyboard navigation</span>
            </label>
            <label class="cb-item">
              <input class="cb-input" type="checkbox" />
              <span class="cb-box" aria-hidden="true"><span class="cb-check"></span></span>
              <span class="cb-txt">Analytics tracking</span>
            </label>
            <label class="cb-item">
              <input class="cb-input" type="checkbox" />
              <span class="cb-box" aria-hidden="true"><span class="cb-check"></span></span>
              <span class="cb-txt">Marketing emails</span>
            </label>
          </div>
        </div>

        <div class="col-stack col-stack-flex">
          <div class="sub-tag">Style B — Stamp Pill</div>
          <div class="stamp-group">
            <input class="stamp-input" type="checkbox" id="nm-ctl-s1" checked />
            <label class="stamp-label" for="nm-ctl-s1">
              <span class="stamp-tick" aria-hidden="true"></span>
              React
            </label>
            <input class="stamp-input" type="checkbox" id="nm-ctl-s2" checked />
            <label class="stamp-label" for="nm-ctl-s2">
              <span class="stamp-tick" aria-hidden="true"></span>
              TypeScript
            </label>
            <input class="stamp-input" type="checkbox" id="nm-ctl-s3" />
            <label class="stamp-label" for="nm-ctl-s3">
              <span class="stamp-tick" aria-hidden="true"></span>
              Vue
            </label>
            <input class="stamp-input" type="checkbox" id="nm-ctl-s4" />
            <label class="stamp-label" for="nm-ctl-s4">
              <span class="stamp-tick" aria-hidden="true"></span>
              Angular
            </label>
            <input class="stamp-input" type="checkbox" id="nm-ctl-s5" checked />
            <label class="stamp-label" for="nm-ctl-s5">
              <span class="stamp-tick" aria-hidden="true"></span>
              TailwindCSS
            </label>
            <input class="stamp-input" type="checkbox" id="nm-ctl-s6" />
            <label class="stamp-label" for="nm-ctl-s6">
              <span class="stamp-tick" aria-hidden="true"></span>
              GraphQL
            </label>
            <input class="stamp-input" type="checkbox" id="nm-ctl-s7" />
            <label class="stamp-label" for="nm-ctl-s7">
              <span class="stamp-tick" aria-hidden="true"></span>
              Node.js
            </label>
            <input class="stamp-input" type="checkbox" id="nm-ctl-s8" checked />
            <label class="stamp-label" for="nm-ctl-s8">
              <span class="stamp-tick" aria-hidden="true"></span>
              Figma
            </label>
          </div>
        </div>

        <div class="col-stack">
          <div class="sub-tag">Style C — Card Check</div>
          <div class="card-check-group">
            <input class="cc-input" type="checkbox" id="nm-ctl-cc1" checked />
            <label class="cc-label" for="nm-ctl-cc1">
              <span class="cc-sq" aria-hidden="true"><span class="cc-sq-inner">✓</span></span>
              <span class="cc-text">
                <span class="cc-name">Sync across devices</span>
                <span class="cc-detail">iCloud · Google Drive</span>
              </span>
              <span class="cc-badge">ON</span>
            </label>
            <input class="cc-input" type="checkbox" id="nm-ctl-cc2" checked />
            <label class="cc-label" for="nm-ctl-cc2">
              <span class="cc-sq" aria-hidden="true"><span class="cc-sq-inner">✓</span></span>
              <span class="cc-text">
                <span class="cc-name">Offline mode</span>
                <span class="cc-detail">Cache on local storage</span>
              </span>
              <span class="cc-badge">ON</span>
            </label>
            <input class="cc-input" type="checkbox" id="nm-ctl-cc3" />
            <label class="cc-label" for="nm-ctl-cc3">
              <span class="cc-sq" aria-hidden="true"><span class="cc-sq-inner">✓</span></span>
              <span class="cc-text">
                <span class="cc-name">Crash reporting</span>
                <span class="cc-detail">Send to Sentry · Firebase</span>
              </span>
              <span class="cc-badge">OFF</span>
            </label>
          </div>
        </div>

      </div>
    </div>

  </div>
</section>
```
## CSS
```css
/* ─── 11 Soft UI Form Controls — pure CSS showcase ───────────────── */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

.nm-ctl {
  --nm-ctl-bg: #f0ebe2;
  --nm-ctl-sd: #d0cbbf;
  --nm-ctl-sl: #fffdf8;
  --nm-ctl-ib: #e8e2d8;
  --nm-ctl-acc: #5c6bc0;
  --nm-ctl-ac2: #8c9ce0;
  --nm-ctl-ac3: #3a4a9a;
  --nm-ctl-grn: #4a8a68;
  --nm-ctl-txt: #6a6258;
  --nm-ctl-txt2: #1a1510;
  --nm-ctl-neu-sm: 5px 5px 12px var(--nm-ctl-sd), -5px -5px 12px var(--nm-ctl-sl);
  --nm-ctl-neu-sm-in: inset 4px 4px 9px var(--nm-ctl-sd), inset -4px -4px 9px var(--nm-ctl-sl);
  position: relative;
  width: 100%;
  min-height: 880px;
  background: var(--nm-ctl-bg);
  font-family: 'Raleway', system-ui, sans-serif;
  color: var(--nm-ctl-txt);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

.nm-ctl *,
.nm-ctl *::before,
.nm-ctl *::after {
  box-sizing: border-box;
}

.nm-ctl .card {
  position: relative;
  width: 100%;
  max-width: 860px;
  background: var(--nm-ctl-bg);
  border-radius: 40px;
  padding: 40px 36px;
  box-shadow: 20px 20px 50px var(--nm-ctl-sd), -20px -20px 50px var(--nm-ctl-sl);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.nm-ctl .sec {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nm-ctl .sec-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.nm-ctl .sec-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--nm-ctl-txt2);
  letter-spacing: 0.3px;
}

.nm-ctl .sec-tag {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--nm-ctl-txt);
  opacity: 0.5;
}

.nm-ctl .sub-tag {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--nm-ctl-txt);
  opacity: 0.5;
  margin-bottom: 4px;
}

.nm-ctl .controls-row {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.nm-ctl .col-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nm-ctl .col-stack-flex {
  flex: 1;
  min-width: 180px;
}

.nm-ctl .div-line {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--nm-ctl-sd), transparent);
  opacity: 0.5;
}
/* Style A — Classic radio */

.nm-ctl .radio-classic {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 160px;
}

.nm-ctl .rc-item {
  display: flex;
  align-items: center;
  gap: 13px;
  cursor: pointer;
  user-select: none;
}

.nm-ctl .rc-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nm-ctl .rc-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm-in);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: box-shadow 0.2s ease;
  position: relative;
}

.nm-ctl .rc-circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--nm-ctl-acc);
  box-shadow: 0 0 8px rgba(92, 107, 192, 0.5);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nm-ctl .rc-input:checked ~ .rc-circle::after {
  transform: translate(-50%, -50%) scale(1);
}

.nm-ctl .rc-input:checked ~ .rc-circle {
  box-shadow: var(--nm-ctl-neu-sm);
}

.nm-ctl .rc-label {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  font-weight: 600;
  color: var(--nm-ctl-txt2);
  transition: color 0.2s;
  line-height: 1.3;
}

.nm-ctl .rc-item:hover .rc-label {
  color: var(--nm-ctl-acc);
}

.nm-ctl .rc-sublabel {
  font-size: 10px;
  color: var(--nm-ctl-txt);
  font-weight: 400;
  margin-top: 1px;
}
/* Style B — Pill group */

.nm-ctl .pill-group {
  display: flex;
  background: var(--nm-ctl-ib);
  border-radius: 20px;
  padding: 5px;
  box-shadow: var(--nm-ctl-neu-sm-in);
  gap: 4px;
}

.nm-ctl .pill-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nm-ctl .pill-label {
  flex: 1;
  padding: 9px 14px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 700;
  color: var(--nm-ctl-txt);
  cursor: pointer;
  text-align: center;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.nm-ctl .pill-input:checked + .pill-label {
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm);
  color: var(--nm-ctl-acc);
}

.nm-ctl .pill-group-v {
  display: flex;
  flex-direction: column;
  background: var(--nm-ctl-ib);
  border-radius: 18px;
  padding: 5px;
  box-shadow: var(--nm-ctl-neu-sm-in);
  gap: 4px;
  min-width: 160px;
}

.nm-ctl .pill-label-v {
  padding: 9px 14px;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 700;
  color: var(--nm-ctl-txt);
  cursor: pointer;
  transition: all 0.22s;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nm-ctl .pill-input:checked + .pill-label-v {
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm);
  color: var(--nm-ctl-acc);
}

.nm-ctl .pill-icon {
  font-size: 16px;
}
/* Style C — Card radio */

.nm-ctl .card-radio-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.nm-ctl .card-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nm-ctl .card-label {
  flex: 1;
  background: var(--nm-ctl-bg);
  border-radius: 18px;
  padding: 16px 12px;
  box-shadow: var(--nm-ctl-neu-sm);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: all 0.22s ease;
  min-width: 100px;
  position: relative;
}

.nm-ctl .card-label:hover {
  transform: translateY(-2px);
  box-shadow: 8px 8px 20px var(--nm-ctl-sd), -8px -8px 20px var(--nm-ctl-sl);
}

.nm-ctl .card-input:checked + .card-label {
  box-shadow: var(--nm-ctl-neu-sm-in);
}

.nm-ctl .card-label::before {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm-in);
  transition: all 0.2s;
}

.nm-ctl .card-input:checked + .card-label::before {
  background: var(--nm-ctl-acc);
  box-shadow: 0 0 8px rgba(92, 107, 192, 0.4);
}

.nm-ctl .card-label::after {
  content: '';
  position: absolute;
  top: 14px;
  right: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nm-ctl .card-input:checked + .card-label::after {
  transform: scale(1);
}

.nm-ctl .card-icon {
  font-size: 24px;
}

.nm-ctl .card-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--nm-ctl-txt2);
  letter-spacing: 0.3px;
}

.nm-ctl .card-desc {
  font-size: 10px;
  color: var(--nm-ctl-txt);
  text-align: center;
  line-height: 1.4;
}

.nm-ctl .card-price {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--nm-ctl-acc);
  margin-top: 2px;
}
/* Checkboxes Style A — classic box */

.nm-ctl .check-classic {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 180px;
}

.nm-ctl .cb-item {
  display: flex;
  align-items: center;
  gap: 13px;
  cursor: pointer;
  user-select: none;
}

.nm-ctl .cb-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nm-ctl .cb-box {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm-in);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
  overflow: hidden;
  position: relative;
}

.nm-ctl .cb-check {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0) rotate(20deg);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nm-ctl .cb-check::before {
  content: '';
  width: 5px;
  height: 9px;
  border-right: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(45deg);
  margin-top: -4px;
}

.nm-ctl .cb-input:checked ~ .cb-box {
  background: linear-gradient(145deg, var(--nm-ctl-acc), var(--nm-ctl-ac3));
  box-shadow: 3px 3px 8px rgba(92, 107, 192, 0.35), -2px -2px 6px var(--nm-ctl-sl);
}

.nm-ctl .cb-input:checked ~ .cb-box .cb-check {
  transform: scale(1) rotate(0deg);
}

.nm-ctl .cb-txt {
  font-size: 13px;
  font-weight: 600;
  color: var(--nm-ctl-txt2);
  transition: color 0.2s;
  line-height: 1.3;
}

.nm-ctl .cb-item:hover .cb-txt {
  color: var(--nm-ctl-acc);
}
/* Checkboxes Style B — stamp pill */

.nm-ctl .stamp-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.nm-ctl .stamp-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nm-ctl .stamp-label {
  padding: 9px 16px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  color: var(--nm-ctl-txt);
  cursor: pointer;
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  user-select: none;
}

.nm-ctl .stamp-label:hover {
  transform: translateY(-1px);
  color: var(--nm-ctl-acc);
}

.nm-ctl .stamp-input:checked + .stamp-label {
  box-shadow: var(--nm-ctl-neu-sm-in);
  color: var(--nm-ctl-acc);
  font-weight: 800;
}

.nm-ctl .stamp-tick {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm-in);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.nm-ctl .stamp-input:checked + .stamp-label .stamp-tick {
  background: var(--nm-ctl-acc);
  box-shadow: 0 0 6px rgba(92, 107, 192, 0.4);
  color: #fff;
  font-size: 10px;
}

.nm-ctl .stamp-input:checked + .stamp-label .stamp-tick::after {
  content: '\2713';
}
/* Checkboxes Style C — card check */

.nm-ctl .card-check-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 240px;
}

.nm-ctl .cc-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nm-ctl .cc-label {
  background: var(--nm-ctl-bg);
  border-radius: 16px;
  padding: 13px 16px;
  box-shadow: var(--nm-ctl-neu-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.2s;
  user-select: none;
}

.nm-ctl .cc-label:hover {
  box-shadow: 7px 7px 16px var(--nm-ctl-sd), -7px -7px 16px var(--nm-ctl-sl);
}

.nm-ctl .cc-input:checked + .cc-label {
  box-shadow: var(--nm-ctl-neu-sm-in);
}

.nm-ctl .cc-sq {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--nm-ctl-bg);
  box-shadow: var(--nm-ctl-neu-sm-in);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.nm-ctl .cc-input:checked + .cc-label .cc-sq {
  background: linear-gradient(145deg, var(--nm-ctl-grn), #2a6a48);
  box-shadow: 2px 2px 6px rgba(74, 138, 104, 0.4);
}

.nm-ctl .cc-sq-inner {
  transform: scale(0);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-size: 12px;
  color: #fff;
}

.nm-ctl .cc-input:checked + .cc-label .cc-sq-inner {
  transform: scale(1);
}

.nm-ctl .cc-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.nm-ctl .cc-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--nm-ctl-txt2);
}

.nm-ctl .cc-detail {
  font-size: 10px;
  color: var(--nm-ctl-txt);
  margin-top: 2px;
}

.nm-ctl .cc-badge {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--nm-ctl-txt);
  padding: 3px 8px;
  background: var(--nm-ctl-ib);
  border-radius: 8px;
  box-shadow: var(--nm-ctl-neu-sm-in);
}

@media (prefers-reduced-motion: reduce) {
  .nm-ctl .rc-circle::after,
    .nm-ctl .pill-label,
    .nm-ctl .pill-label-v,
    .nm-ctl .card-label,
    .nm-ctl .card-label::after,
    .nm-ctl .cb-box,
    .nm-ctl .cb-check,
    .nm-ctl .stamp-label,
    .nm-ctl .cc-label,
    .nm-ctl .cc-sq-inner {
    transition: none;
    animation: none;
  }
}
```

Techniques used in this demo

box-shadowMDN ↗aria-* attributesMDN ↗transitionMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →