Design for AI

Grupo de filtros em pílula

Grupo de filtros em pílula: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

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

Um grupo de filtros multi-seleção em pílulas feito de checkboxes escondidos: pílulas brancas com borda de 1px #d1d5db, texto cinza #374151 em 13px medium, padding de 8px por 14px, totalmente arredondadas, 8px de distância entre elas. No hover a borda e o texto ficam índigo; uma pílula marcada se preenche de índigo sólido #4f46e5 com texto branco e mostra um pequeno check em CSS (uma caixa com borda rotacionada) antes do rótulo. No active escala para 96%. Outline de foco de 2px índigo.

Mesma prateleira