Design for AIPlus rotate
Plus rotate: a CSS button. Copy the rules, or the prompt that rebuilds it.
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
A 48px round green #16a34a floating action button with a white 22px inline SVG plus icon and a green glow shadow 0 4px 12px. On hover the plus rotates 90deg (250ms) and the background goes #15803d; active #166534 without shadow. Focus ring translucent green.