Hello Friends today we will create flaying button for sending message.

like this.

create button tag then take div give class "svg-wrapper-1"

then another div for svg class name "svg-wrapper" now add the svg code after svg code close the both div and create "span" tag .

see the html code should like this

<button>

  <div class="svg-wrapper-1">

    <div class="svg-wrapper">

      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">

        <path fill="none" d="M0 0h24v24H0z"></path>

        <path fill="currentColor" d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"></path>

      </svg>

    </div>

  </div>

  <span>Send</span>

</button>

after completing html code lets start style your html .

first create css file and save dot css ".css". creating this file link with you html file like this

<link rel="stylesheet" type="text/css" href="css/style.css">

first style the button 

button {

 font-family: inherit;

 font-size: 20px;

 background: royalblue;

 color: white;

 padding: 0.7em 1em;

 padding-left: 0.9em;

 display: flex;

 align-items: center;

 border: none;

 border-radius: 16px;

 overflow: hidden;

 transition: all 0.2s;

}

as after that span design.

button span {

 display: block;

 margin-left: 0.3em;

 transition: all 0.3s ease-in-out;

}

now svg styling

button svg {

 display: block;

 transform-origin: center center;

 transition: transform 0.3s ease-in-out;

}

add hover selector to button

button:hover .svg-wrapper {

 animation: fly-1 0.6s ease-in-out infinite alternate;

}

button:hover svg {

 transform: translateX(1.2em) rotate(45deg) scale(1.1);

}

button:hover span {

 transform: translateX(5em);

}

add active selector  to button.

button:active {

 transform: scale(0.95);

}

for animate your button add "@keyframes" and write your animation name for example

@keyframes fly-1 {

 from {

  transform: translateY(0.1em);

 }

 to {

  transform: translateY(-0.1em);

 }

}

we completed now run your file result will awesome.

if you want to watch video cleck here   to watch a full video