Design for AI

Pill filter group

Pill filter group: a CSS button. Copy the rules, or the prompt that rebuilds it.

grouppillscheckboxmulti-select

CSS
.btn-100 {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px
}
.btn-100 input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0
}
.btn-100 span {
  display: inline-block;
  font: 500 13px/1 system-ui,sans-serif;
  color: #374151;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background .15s,color .15s,border-color .15s
}
.btn-100 span:hover {
  border-color: #6366f1;
  color: #4338ca
}
.btn-100 input:checked+span {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff
}
.btn-100 input:checked+span::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-right: 8px;
  vertical-align: 1px
}
.btn-100 input:focus-visible+span {
  outline: 2px solid #4f46e5;
  outline-offset: 2px
}
.btn-100 span:active {
  transform: scale(.96)
}
HTML
<div class="btn-100"><label><input type="checkbox" checked><span>CSS</span></label><label><input type="checkbox"><span>Buttons</span></label><label><input type="checkbox"><span>Dark</span></label></div>
Prompt

A multi-select pill filter group made of hidden checkboxes: white pills with 1px #d1d5db border, grey text #374151 at 13px medium, 8px by 14px padding, fully rounded, 8px apart. Hover turns the border and text indigo; a checked pill fills solid indigo #4f46e5 with white text and shows a small CSS checkmark (a rotated bordered box) before the label. Active scales to 96%. Focus outline 2px indigo.

Same shelf