Submit button with rotation effect - CSS only - Step-by-step

HTML

For HTML, we need a button with text and "check" svg element inside.

We'll display the text and hide the svg.

And on button focus, we'll display the svg and hide the text element.

<button class="submit_button">
    <span>Submit</span>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
    </svg>
</button>

CSS

For CSS, first, we'll style the button.

We'll set height to 30 px and align elements in center, using flexbox.

Now we'll set cursor to pointer and add a little transition.
Lastly, let's change text and border colors, and add a little radius.

.submit_button {
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: .5s;
    color: rgb(196, 113, 62);
    border-color: rgb(196, 113, 62);
    border-radius: 2px;
}

On focus, we'll set radius to 15 pixels. With 30 pixels height, this will form a circle.

We'll set cursor to default, so that button doesn't look clickable.

And we'll change border and text color to green.

Let's rotate by 720 degrees (two whole circles - 360 * 2) and by adding transition, this change will happen smoothly.

.submit_button:focus {
    border-radius: 15px;
    cursor: default;
    border-color: rgb(99, 184, 33);
    color: rgb(99, 184, 33);
    transform: rotate(720deg);
    transition: .5s;
}

Now we'll style "check" svg.

This element will be displayed only when button is focused.

We'll set width to 0, and on button focus, to 15 pixels.

By adding a little transition, this element will shrink and expand nice and smooth.

.submit_button svg {
    transition: .5s;
    width: 0;
}
.submit_button:focus svg {
    transition: .5s;
    width: 15px;
}

Now we'll style the text element.

This element will be displayed only when button isn't in focus.

To achieve that, we'll set width to 50px, and then on button focus, to 0 pixels.

Let's also set font size to 0 on focus, so that the text looks like it's growing.

By setting the transition, this will happen smoothly.

.submit_button span {
    transition: .5s;
    width: 50px;
}
.submit_button:focus span {
    transition: .5s;
    width: 0;
    font-size: 0;
}

And that's it.

You can find video tutorial and full code here.

Thank you for reading. ❤️