Design for AI

Mais que gira

Mais que gira: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

iconplusinline-svgrotatecircle

CSS
.btn-077 {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: #fff;
  background: #16a34a;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(22,163,74,.4);
  transition: background .15s,box-shadow .15s
}
.btn-077 svg {
  transition: transform .25s
}
.btn-077:hover {
  background: #15803d;
  box-shadow: 0 6px 16px rgba(22,163,74,.45)
}
.btn-077:hover svg {
  transform: rotate(90deg)
}
.btn-077:focus-visible {
  outline: 3px solid rgba(22,163,74,.5);
  outline-offset: 3px
}
.btn-077:active {
  background: #166534;
  box-shadow: none
}
HTML
<button class="btn-077" aria-label="Create"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></button>
Prompt

Um botão de ação flutuante redondo de 48px verde #16a34a com um ícone de mais em SVG inline branco de 22px e uma sombra verde luminosa 0 4px 12px. No hover o sinal de mais gira 90deg (250ms) e o fundo vai para #15803d; active #166534 sem sombra. Anel de foco verde translúcido.

Mesma prateleira