Design for AI

Pillen-Filtergruppe

Pillen-Filtergruppe: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

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

Eine Multi-Select-Pillen-Filtergruppe aus versteckten Checkboxen: weiße Pillen mit 1px Rahmen #d1d5db, grauer Text #374151 in 13px medium, 8px mal 14px Padding, voll abgerundet, 8px Abstand. Hover färbt Rahmen und Text Indigo; eine gewählte Pille füllt sich komplett Indigo #4f46e5 mit weißem Text und zeigt ein kleines CSS-Häkchen (eine gedrehte Box mit Rahmen) vor dem Label. Active skaliert auf 96%. Fokus-Outline 2px Indigo.

Gleiches Regal