Más giratorio

Más giratorio: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

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

Un botón de acción flotante redondo de 48px verde #16a34a con un icono más SVG inline blanco de 22px y una sombra de resplandor verde 0 4px 12px. Al pasar el cursor el más gira 90deg (250ms) y el fondo pasa a #15803d; active #166534 sin sombra. Anillo de foco verde translúcido.

Más giratorio

Misma estantería