Design for AI

Grupo de filtros píldora

Grupo de filtros píldora: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

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

Un grupo de filtros tipo píldora de selección múltiple hecho con checkboxes ocultos: píldoras blancas con borde de 1px #d1d5db, texto gris #374151 de 13px de peso medio, padding de 8px por 14px, totalmente redondeadas, separadas 8px. Al pasar el cursor el borde y el texto se vuelven índigo; una píldora marcada se rellena de índigo sólido #4f46e5 con texto blanco y muestra una pequeña marca de verificación en CSS (una caja con borde girada) antes de la etiqueta. En active se escala al 96%. Outline de foco de 2px índigo.

Misma estantería