DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Designyff
Designyff

Posted on • Originally published at designyff.com

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

Submit button

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

And that's it.

You can find video tutorial and full code here.

Thank you for reading. ❀️

Top comments (0)

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›