Checkboxes · community component

Soft Glow Pill Toggle Checkbox

Rounded badge toggle that glows active upon selection.

CSSMIT licenseUpdated today

◉ 0 views

Live 1 line⌘Z Undo

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<label class="glowpill-wrap"><input type="checkbox" checked><span class="glowpill-badge">ENABLED</span></label>

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<label class="glowpill-wrap"><input type="checkbox" checked><span class="glowpill-badge">ENABLED</span></label>

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

.glowpill-wrap { display: block; width: fit-content; margin: auto; cursor: pointer; font-family: monospace; }
.glowpill-wrap input { display: none; }
.glowpill-badge { display: block; padding: 4px 10px; border-radius: 99px; background: #18181b; border: 1px solid #27272a; font-size: 8px; font-weight: 900; color: #71717a; transition: all 0.2s; }
.glowpill-wrap input:checked + .glowpill-badge { background: #10b981; color: #000; border-color: #10b981; box-shadow: 0 0 10px rgba(16, 185, 129, 0.4); }

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

.glowpill-wrap { display: block; width: fit-content; margin: auto; cursor: pointer; font-family: monospace; }
.glowpill-wrap input { display: none; }
.glowpill-badge { display: block; padding: 4px 10px; border-radius: 99px; background: #18181b; border: 1px solid #27272a; font-size: 8px; font-weight: 900; color: #71717a; transition: all 0.2s; }
.glowpill-wrap input:checked + .glowpill-badge { background: #10b981; color: #000; border-color: #10b981; box-shadow: 0 0 10px rgba(16, 185, 129, 0.4); }

CSS colorsDetected automatically · edit to replace everywhere

0 colors

FormatCSS

CategoryCheckboxes

AccessibilityKeyboard ready

Explore similar parts →

Created by

codepeek

@codepeek

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.