Checkboxes · community component

Wax Seal Checkbox

A round checkbox styled like a wax letter seal: unchecked it's a flat gray disc, and checking it swells slightly with a glossy highlight and an embossed checkmark pressed into the surface.

CSSMIT licenseUpdated today

◉ 0 views

Live 1 line⌘Z Undo

<!--
  Author: @emma-lake
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<label class="wax-check">
  <input type="checkbox" class="wax-check__input"/>
  <span class="wax-check__seal">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
      <path d="M4 12.5L9.5 18L20 6.5" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </span>
  <span class="wax-check__label">Seal the deal</span>
</label>

<!--
  Author: @emma-lake
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<label class="wax-check">
  <input type="checkbox" class="wax-check__input"/>
  <span class="wax-check__seal">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
      <path d="M4 12.5L9.5 18L20 6.5" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </span>
  <span class="wax-check__label">Seal the deal</span>
</label>

/*
 * Author: @emma-lake
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.wax-check {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  font-family: system-ui, sans-serif;
  color: #9a9aa5;
  font-size: 15px;
}
.wax-check__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.wax-check__seal {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6b6b76, #3a3a44 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.4s ease, color 0.3s ease;
  animation: wax-idle-shine 3.2s ease-in-out infinite;
}
@keyframes wax-idle-shine {
  0%, 100% {
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.4);
  }
  50% {
    box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.18), 0 2px 8px rgba(0, 0, 0, 0.4);
  }
}
.wax-check__seal svg {
  width: 15px;
  height: 15px;
}
.wax-check__input:checked ~ .wax-check__seal {
  transform: scale(1.12);
  background: radial-gradient(circle at 35% 30%, #f87171, #b91c1c 70%);
  color: rgba(0, 0, 0, 0.35);
  animation: wax-checked-pulse 2.1s ease-in-out infinite;
}
@keyframes wax-checked-pulse {
  0%, 100% {
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.25), inset 0 -3px 6px rgba(0, 0, 0, 0.3), 0 4px 10px rgba(185, 28, 28, 0.5);
  }
  50% {
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.35), inset 0 -3px 6px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(185, 28, 28, 0.7);
  }
}
.wax-check__input:checked ~ .wax-check__label {
  color: #f4f4f5;
}

/*
 * Author: @emma-lake
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.wax-check {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  font-family: system-ui, sans-serif;
  color: #9a9aa5;
  font-size: 15px;
}
.wax-check__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.wax-check__seal {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6b6b76, #3a3a44 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.4s ease, color 0.3s ease;
  animation: wax-idle-shine 3.2s ease-in-out infinite;
}
@keyframes wax-idle-shine {
  0%, 100% {
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.4);
  }
  50% {
    box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.18), 0 2px 8px rgba(0, 0, 0, 0.4);
  }
}
.wax-check__seal svg {
  width: 15px;
  height: 15px;
}
.wax-check__input:checked ~ .wax-check__seal {
  transform: scale(1.12);
  background: radial-gradient(circle at 35% 30%, #f87171, #b91c1c 70%);
  color: rgba(0, 0, 0, 0.35);
  animation: wax-checked-pulse 2.1s ease-in-out infinite;
}
@keyframes wax-checked-pulse {
  0%, 100% {
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.25), inset 0 -3px 6px rgba(0, 0, 0, 0.3), 0 4px 10px rgba(185, 28, 28, 0.5);
  }
  50% {
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.35), inset 0 -3px 6px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(185, 28, 28, 0.7);
  }
}
.wax-check__input:checked ~ .wax-check__label {
  color: #f4f4f5;
}

CSS colorsDetected automatically · edit to replace everywhere

0 colors

FormatCSS

CategoryCheckboxes

AccessibilityKeyboard ready

Explore similar parts →

Created by

Emma Lake

@emma-lake

Open-source licenseMIT

Use, copy, modify, publish, distribute and sell this UI element in personal or commercial work.

Keep the original copyright and MIT notice in substantial copies. Provided “as is”, without warranty.

Read the MIT license

Used tags

#buttons #css #interface #opensource #codepeek

Community

Comments 0

One main comment per member. Conversations can have unlimited replies.