JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class="sendme">
    <button>
        <p>Отправить</p>
        <svg version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
            <path id="paper-plane-icon" d="M462,54.955L355.371,437.187l-135.92-128.842L353.388,167l-179.53,124.074L50,260.973L462,54.955z
M202.992,332.528v124.517l58.738-67.927L202.992,332.528z"></path>
        </svg>
    </button>
</div>

CSS

.sendme * {
    -webkit-transition: all 0.15s;
    -moz-transition: all 0.15s;
    -o-transition: all 0.15s;
    -ms-transition: all 0.15s;
    transition: all 0.15s;
    outline: none;
}
button {
    font-size: 19px;
    font-family:'Pacifico';
    overflow: visible;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    position: relative;
    padding-right: 30px;
    background-color: #ecfbff;
    border: 2px solid #a6e0ee;
    color: #2d7586;
    display: block;
    margin: 13% auto;
    height: 60px;
    width: 200px;
    cursor: pointer;
}
button:hover {
    background-color: #ddf7ff;
}
button:hover svg {
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
    -webkit-transition: -webkit-transform 0.15s;
    -moz-transition: -moz-transform 0.15s;
    -o-transition: -o-transform 0.15s;
    -ms-transition: -ms-transform 0.15s;
    transition: transform 0.15s;
}
button svg {
    position: absolute;
    top: 13px;
    right: 25px;
    height: 30px;
    width: auto;
    -webkit-transition: -webkit-transform 0.15s;
    -moz-transition: -moz-transform 0.15s;
    -o-transition: -o-transform 0.15s;
    -ms-transition: -ms-transform 0.15s;
    transition: transform 0.15s;
}
button svg path {
    fill: #2d7586;
}
button.clicked {
    background-color: #cff5b3;
    border: 2px solid #cff5b3;
    color: #6aaa3b;
    padding-right: 6px;
    -webkit-animation: bounce-in 0.3s;
    -moz-animation: bounce-in 0.3s;
    -o-animation: bounce-in 0.3s;
    -ms-animation: bounce-in 0.3s;
    animation: bounce-in 0.3s;
    cursor: default;
}
button.clicked svg {
    -webkit-animation: flyaway 1.3s linear;
    -moz-animation: flyaway 1.3s linear;
    -o-animation: flyaway 1.3s linear;
    -ms-animation: flyaway 1.3s linear;
    animation: flyaway 1.3s linear;
    top: -80px;
    right: -1000px;
}
button.clicked svg path {
    fill: #6aaa3b;
}
@-moz-keyframes...

JavaScript

$('button').click(function() {
  $(this).toggleClass('clicked');
  $('button p').text(function(i, text) {
    return text === "Отправлено!" ? "Отправить" : "Отправлено!";
  });
});