Back

How to create a send button with animation

A step-by-step 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>

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

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


        .send-button span {
            padding: 0 20px;
        }

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


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

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

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%);}
        }

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  */
        }

Video tutorial

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

Whole code

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

<style>
.send-button {
  font-family: Tahoma;
  cursor: pointer;
  background-color: #34495e;
  color: #fff;
  display: flex;
  align-items: center;
  width: fit-content;
  padding: 10px 15px;
}
.send-button span {
  padding: 0 20px;
}
.send-button svg {
  transform: rotate(-40deg);
  transition: 0.2s;
}
.send-button:hover svg {
  transform: rotate(10deg) translate(50%, 5%);
  transition: 0.2s;
  animation: move infinite 1s 0.2s;
}
@keyframes move {
  0% {transform: rotate(10deg) translate(50%, 5%);}
  50% {transform: rotate(-10deg) translate(50%, -5%);}
  100% {transform: rotate(10deg) translate(50%, 5%);}
}
</style>

Thank you for reading this article.

How to create a send button with animation

HTML

CSS

Video tutorial

Whole code

More buttons

Similar

See also