Back

Submit button with rotation effect - CSS only

Tutorial on how to create submit button that transforms to check on click.

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.

Video tutorial

You can find the video with step-by-step guide on youtube:

Whole code

<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>

<style>
.submit_button {
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: .5s;
  border-radius: 2px;
  border-color: rgb(196, 113, 62);
  color: rgb(196, 113, 62);
}
.submit_button:focus {
  transform: rotate(720deg);
  transition: .5s;
  border-radius: 15px;
  cursor: default;
  border-color: rgb(99, 184, 33);
  color: rgb(99, 184, 33);
}

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

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

Thank you for reading this article.

Submit button with rotation effect - CSS only

HTML

CSS

Video tutorial

Whole code

More buttons

Similar

See also