Design for AI

Atração magnética

Atração magnética: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

tiltmagneticpilltranslateovershoot

CSS
.btn-122 {
  position: relative;
  font: 600 14px/1 system-ui,sans-serif;
  color: #0f172a;
  background: #fde68a;
  border: 0;
  border-radius: 999px;
  padding: 13px 26px;
  cursor: pointer;
  transition: transform .4s cubic-bezier(.2,1.8,.4,1),background .2s
}
.btn-122::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: inherit
}
.btn-122:hover {
  transform: translate(3px,-4px) scale(1.04);
  background: #fcd34d
}
.btn-122:focus-visible {
  outline: 2px solid #0f172a;
  outline-offset: 3px
}
.btn-122:active {
  transform: translate(0,0) scale(.98);
  background: #fbbf24
}
HTML
<button class="btn-122">Pull me</button>
Prompt

Uma pílula amarelo quente #fde68a com texto #0f172a de 14px semibold e padding de 13px por 26px. Um halo invisível de 14px em volta (um pseudo-elemento) amplia a área de hover, então o botão começa a se mover antes do cursor encostar nele: no hover pula 3px para a direita e 4px para cima com um easing de mola que passa do ponto (cubic-bezier .2,1.8,.4,1) e escala 1.04, fundo #fcd34d. No active volta ao lugar e escala 0.98 sobre #fbbf24. Foco com outline escuro de 2px.

Mesma prateleira