DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Designyff
Designyff

Posted on • Originally published at designyff.com

How to create a send button with animation - Step-by-step

Send button with animation

Tutorial on how to create a send button with animated icon.

HTML

For HTML, we need a send svg and text "SEND" inside a div with "send-button" class.

<div class="send-button">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="20" height="20">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
    </svg>
    <span>SEND</span>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS

For css, first we'll style the div element with "send-button" class.

First, we'll set some basic styling: font to Tahoma, cursor to pointer, background to dark blue, text color to white.

Now we'll position elements in a row using flexbox and align items in center.

We'll set width to fit content and add a little padding.

.send-button {
    font-family: Tahoma;
    cursor: pointer;
    background-color: #34495e;
    color: #fff;
    display: flex;
    align-items: center;
    width: fit-content;
    padding: 10px 15px;
}
Enter fullscreen mode Exit fullscreen mode

Now we'll add some padding to span element with "SEND" text.

.send-button span {
    padding: 0 20px;
}
Enter fullscreen mode Exit fullscreen mode

Then we'll rotate svg by -40 degrees and add 200ms transition.

.send-button svg {
    transform: rotate(-40deg);
    transition: 0.2s;
}
Enter fullscreen mode Exit fullscreen mode

On hover, we'll move svg a by 50% to the right and 5% to top, and rotate by 10 degrees.

We'll also add 200ms transition.

.send-button:hover svg {
    transform: rotate(10deg) translate(50%, 5%);
    transition: 0.2s;
}
Enter fullscreen mode Exit fullscreen mode

Now we'll create an animation named "move" that will, as the name says, move an element.

This animation will move an element by 5% to top and 5% to bottom.

This is why we set 5% X translation to svg on button hover.

Also, it will rotate an element by 10 degrees in both directions.

@keyframes move {
    0% {transform: rotate(10deg) translate(50%, 5%);}
    50% {transform: rotate(-10deg) translate(50%, -5%);}
    100% {transform: rotate(10deg) translate(50%, 5%);}
}
Enter fullscreen mode Exit fullscreen mode

Lastly, we'll add created animation to our svg.

"move" is the name of our animation, infinite is the iteration count, which means that animation will be infinite, 1s is the duration of the animation (for 1 iteration), and 0.2s (200 milliseconds) is animation delay. I added the delay because of the transition I set on svg. Animation will start as soon as the transition finishes.

.send-button:hover svg {
    transform: rotate(10deg) translate(50%, 5%);
    transition: 0.2s;
    animation: move infinite 1s 0.2s; /*  New line -> Animation  */
}
Enter fullscreen mode Exit fullscreen mode

And that's it.

You can find the video with step-by-step guide here.

Thank you for reading โค๏ธ

Top comments (0)

Want to Create an Account?
Now it's your turn!
ย 
๐Ÿ—’ Share a tutorial
๐Ÿค” Reflect on your coding journey
โ“ Ask a question

Create an account to join hundreds of thousands of DEV members on their journey.