Back
A comprehensive guide to building a submit button that elegantly transforms into a checkmark with a smooth rotating animation using CSS.
<button class="submit_button">
<span class="submit-text">Submit</span>
<svg class="submit-icon" 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>
.submit_button {
height: 30px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: 0.5s;
color: rgb(196, 113, 62);
border-color: rgb(196, 113, 62);
border-radius: 2px;
}
The magic happens in our :focus state styling. When the button is clicked, we trigger a dramatic transformation with several coordinated changes:
1. The border-radius increases to 15px (half the button's height), creating a perfect circle
2. The color scheme shifts from orange-brown to green, signaling success
3. The cursor changes from pointer to default, indicating the action is complete
4. Most impressively, the entire button rotates 720 degrees (two full rotations)
All these changes occur over 0.5 seconds, creating a fluid, delightful animation that provides clear feedback to the user that their submission was successful.
.submit_button:focus {
border-radius: 15px;
cursor: default;
border-color: rgb(99, 184, 33);
color: rgb(99, 184, 33);
transform: rotate(720deg);
transition: 0.5s;
}
For the checkmark SVG icon, we employ a clever width-based animation technique. Initially, the icon has zero width, making it effectively invisible despite being in the DOM.
When the button receives focus, we animate the width to 15px, causing the icon to grow into view. The transition property ensures this happens smoothly, creating the appearance of the checkmark emerging as part of the animation.
.submit-icon {
transition: 0.5s;
width: 0;
}
.submit_button:focus .submit-icon {
transition: 0.5s;
width: 15px;
}
Conversely, we need to handle the text element, which should disappear as the checkmark appears. We use a similar approach but in reverse.
The text initially has a width of 50px, but when the button receives focus, this width animates to zero. We also set the font-size to zero to ensure the text doesn't create any visual artifacts as it shrinks.
This creates a seamless transition where the text appears to be replaced by the checkmark icon as part of a unified animation sequence.
.submit-text {
transition: 0.5s;
width: 50px;
}
.submit_button:focus .submit-text {
transition: 0.5s;
width: 0;
font-size: 0;
}
This advanced button provides meaningful visual feedback to users through animation, enhancing the interface's interactivity while maintaining clean, efficient code. The CSS-only approach means it works reliably across browsers without JavaScript dependencies, making it both lightweight and robust.
<button class="submit_button">
<span class="submit-text">Submit</span>
<svg class="submit-icon" 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: 0.5s;
border-radius: 2px;
border-color: rgb(196, 113, 62);
color: rgb(196, 113, 62);
}
.submit_button:focus {
transform: rotate(720deg);
transition: 0.5s;
border-radius: 15px;
cursor: default;
border-color: rgb(99, 184, 33);
color: rgb(99, 184, 33);
}
.submit-icon {
transition: 0.5s;
width: 0;
}
.submit_button:focus .submit-icon {
transition: 0.5s;
width: 15px;
}
.submit-text {
transition: 0.5s;
width: 50px;
}
.submit_button:focus .submit-text {
transition: 0.5s;
width: 0;
font-size: 0;
}
</style>
Thank you for reading this article.
Comments
No comments yet. Be the first to comment!