1 
 2<div class="cbx cbx--elastic">
 3  <input id="cbx-elastic" class="cbx__input" type="checkbox" />
 4  <label class="cbx__label" for="cbx-elastic">
 5    <span class="cbx__box" aria-hidden="true">
 6      <svg class="cbx__svg" viewBox="0 0 24 24" aria-hidden="true">
 7        <path class="cbx__path" d="M6 12l4 4 8-8"></path>
 8      </svg>
 9    </span>
10    <span class="cbx__text">I agree</span>
11  </label>
12</div>          

  1 
  2@property --p {
  3  syntax: "<number>";
  4  initial-value: 0;
  5  inherits: false;
  6}
  7@property --fill {
  8  syntax: "<number>";
  9  initial-value: 0;
 10  inherits: false;
 11}
 12@property --glow {
 13  syntax: "<number>";
 14  initial-value: 0;
 15  inherits: false;
 16}
 17 
 18.cbx {
 19  --saffron: #ff9933;
 20  --orange: #ff4500;
 21  --ink: #fff;
 22  --size: 42px;
 23  --bw: 2.5px;
 24  --radius: 12px;
 25  --stroke: 3px;
 26  display: inline-block;
 27}
 28 
 29.cbx__input {
 30  position: absolute;
 31  width: 1px;
 32  height: 1px;
 33  margin: -1px;
 34  border: 0;
 35  padding: 0;
 36  clip: rect(0 0 0 0);
 37  overflow: hidden;
 38}
 39 
 40.cbx__label {
 41  display: inline-grid;
 42  grid-auto-flow: column;
 43  align-items: center;
 44  gap: 0.85rem;
 45  cursor: pointer;
 46  user-select: none;
 47  -webkit-tap-highlight-color: transparent;
 48}
 49 
 50.cbx__text {
 51  font:
 52    700 1.2rem/1 system-ui,
 53    Segoe UI,
 54    Roboto,
 55    sans-serif;
 56  letter-spacing: 0.02em;
 57  padding: 10px 1px;
 58  background: linear-gradient(90deg, var(--saffron), var(--orange));
 59  -webkit-background-clip: text;
 60  background-clip: text;
 61  color: transparent;
 62  opacity: 0.9;
 63  transition:
 64    opacity 0.25s ease,
 65    transform 0.2s ease;
 66}
 67 
 68.cbx__box {
 69  position: relative;
 70  width: var(--size);
 71  height: var(--size);
 72  border-radius: var(--radius);
 73  border: var(--bw) solid color-mix(in oklab, var(--saffron), transparent 55%);
 74  background: linear-gradient(
 75      180deg,
 76      rgba(255, 255, 255, 0.06),
 77      rgba(0, 0, 0, 0.06)
 78    )
 79    padding-box;
 80  box-shadow:
 81    inset 0 1px 2px rgba(255, 255, 255, 0.1),
 82    inset 0 -1px 2px rgba(0, 0, 0, 0.25),
 83    0 0 calc(10px * var(--glow)) calc(2px * var(--glow))
 84      color-mix(in oklab, var(--saffron), transparent 78%);
 85  transition:
 86    border-color 0.25s ease,
 87    box-shadow 0.25s ease;
 88  overflow: hidden;
 89  --p: 0;
 90  --fill: 0;
 91  --glow: 0;
 92}
 93 
 94.cbx__box::before {
 95  content: "";
 96  position: absolute;
 97  inset: calc(var(--bw) * -1);
 98  padding: var(--bw);
 99  border-radius: inherit;
100  background: conic-gradient(
101    from -90deg,
102    color-mix(in oklab, var(--saffron), white 12%) 0 calc(var(--p) * 1turn),
103    transparent 0 1turn
104  );
105  mask:
106    linear-gradient(#000 0 0) content-box,
107    linear-gradient(#000 0 0) border-box;
108  -webkit-mask:
109    linear-gradient(#000 0 0) content-box,
110    linear-gradient(#000 0 0) border-box;
111  -webkit-mask-composite: xor;
112  mask-composite: exclude;
113  opacity: 0.28;
114  pointer-events: none;
115}
116 
117.cbx__box::after {
118  content: "";
119  position: absolute;
120  inset: 0;
121  border-radius: inherit;
122  background: linear-gradient(90deg, var(--orange), var(--saffron));
123  transform-origin: left center;
124  transform: scaleX(var(--fill));
125  opacity: 0.18;
126  pointer-events: none;
127}
128 
129.cbx__svg {
130  position: absolute;
131  inset: 0;
132  width: 100%;
133  height: 100%;
134}
135.cbx__path {
136  fill: none;
137  stroke: #fff;
138  stroke-width: var(--stroke);
139  stroke-linecap: round;
140  stroke-linejoin: round;
141  stroke-dasharray: 40;
142  stroke-dashoffset: 40;
143  transition:
144    stroke-dashoffset 0.28s cubic-bezier(0.2, 0.8, 0.3, 1) 0.06s,
145    filter 0.2s;
146  filter: drop-shadow(
147    0 0 0.2rem color-mix(in oklab, var(--saffron), white 20%)
148  );
149}
150 
151.cbx__input:focus-visible + .cbx__label .cbx__box {
152  border-color: color-mix(in oklab, var(--saffron), white 16%);
153  box-shadow:
154    0 0 0 0.18rem color-mix(in oklab, var(--saffron), transparent 72%),
155    0 0 0 0.38rem color-mix(in oklab, var(--orange), transparent 86%);
156}
157 
158.cbx__input:checked + .cbx__label .cbx__box {
159  --p: 1;
160  --fill: 1;
161  --glow: 1;
162}
163.cbx__input:checked + .cbx__label .cbx__path {
164  stroke-dashoffset: 0;
165}
166.cbx__input:checked + .cbx__label .cbx__text {
167  opacity: 1;
168  transform: translateY(-1px);
169}