<button class="btn">
  <p>SEND MSG</p>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 512.002 512.002" style="enable-background:new 0 0 512.002 512.002;" xml:space="preserve">
<g>
	<g>
		<g>
			<path style="fill:#FF4F19;" d="M317.024,306.849c0.352-3.383,2.797-6.18,6.109-6.965c3.305-0.781,6.758,0.602,8.594,3.469
				l49.016,76.629c7.367,11.57,11.258,24.937,11.258,38.656v85.363c0,3.383-2.125,6.398-5.312,7.535
				c-0.875,0.312-1.789,0.465-2.688,0.465c-2.352,0-4.641-1.039-6.195-2.934l-70.32-85.949c-1.344-1.648-1.977-3.766-1.766-5.883
				L317.024,306.849z"/>
		</g>
		<g>
			<path style="fill:#E9001E;" d="M194.977,306.849c-0.352-3.383-2.797-6.18-6.109-6.965c-3.305-0.781-6.758,0.602-8.594,3.469
				l-49.016,76.629c-7.367,11.57-11.258,24.937-11.258,38.656v85.363c0,3.383,2.125,6.398,5.312,7.535
				c0.875,0.312,1.789,0.465,2.688,0.465c2.352,0,4.641-1.039,6.195-2.934l70.32-85.949c1.344-1.648,1.977-3.766,1.766-5.883
				L194.977,306.849z"/>
		</g>
		<g>
			<path style="fill:#FFD200;" d="M260.118,1.143c-2.531-1.523-5.703-1.523-8.234,0c-3.422,2.055-83.883,51.562-83.883,158.859
				c0,43.324,10.766,158.594,25.047,268.125c2.07,15.891,15.703,27.875,31.695,27.875h62.516c15.992,0,29.625-11.984,31.695-27.875
				c14.281-109.531,25.047-224.801,25.047-268.125C344.001,52.705,263.54,3.197,260.118,1.143z"/>
		</g>
		<g>
			<path style="fill:#FF9600;" d="M256.001,456.002h-31.258c-15.992,0-29.625-11.984-31.695-27.875
				c-14.281-109.531-25.047-224.801-25.047-268.125c0-107.297,80.461-156.805,83.883-158.859c1.261-0.759,2.682-1.138,4.103-1.141
				h0.015V456.002z"/>
		</g>
		<g>
			<circle style="fill:#53DCFF;" cx="256.001" cy="168.002" r="48"/>
		</g>
		<g>
			<g>
				<path style="fill:#FF4F19;" d="M256.001,512.002c-4.422,0-8-3.582-8-8v-192c0-4.418,3.578-8,8-8s8,3.582,8,8v192
					C264.001,508.42,260.423,512.002,256.001,512.002z"/>
			</g>
		</g>
		<g>
			<path style="fill:#FF4F19;" d="M251.884,1.143c-2.288,1.374-38.98,23.989-63.071,70.859h134.376
				c-24.091-46.87-60.783-69.486-63.071-70.859C257.587-0.381,254.415-0.381,251.884,1.143z"/>
		</g>
		<g>
			<path style="fill:#E9001E;" d="M256.001,0c-1.426,0-2.852,0.381-4.117,1.143c-2.288,1.374-38.98,23.989-63.071,70.859h67.188V0z"
				/>
		</g>
		<g>
			<path style="fill:#B3F4FF;" d="M304.001,168.002c0-26.51-21.49-48-48-48v96C282.511,216.002,304.001,194.512,304.001,168.002z"/>
		</g>
	</g>
	<g>
		<g>
			<path style="fill:#5C546A;" d="M256.001,224.002c-30.875,0-56-25.121-56-56s25.125-56,56-56s56,25.121,56,56
				S286.876,224.002,256.001,224.002z M256.001,128.002c-22.055,0-40,17.945-40,40s17.945,40,40,40s40-17.945,40-40
				S278.056,128.002,256.001,128.002z"/>
		</g>
	</g>
</g>
  </svg>
</button>





<!-- sm btns -->
<a href="https://twitter.com/cmlohr"><button class="twitter-btn"><i class="fab fa-twitter"></i></button></a>

<a href="https://www.linkedin.com/in/cmlohr/"><button class="in-btn"><i class="fab fa-linkedin-in"></i></button></a>

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@500&display=swap');
$font = 'Comfortaa', cursive;
$txt = #f8f1f1;
$bg-end = #61b15a;
$bg-start = #301b3f;

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; margin: 0; padding: 0;
}

body {
  background-color: #ccffbd;
}

.btn {
  font-size: 1.5em;
  font-family: $font;
  font-weight: bold;
  overflow: visible;
  position: absolute; 
  margin: auto; 
  left: 0; 
  right: 0; 
  top: 0; 
  bottom: 0;
  padding: 10px;
  color: $txt;
  display: block;
  height: 70px;
  width: 250px;
  cursor: pointer;
  border-radius: 0;
  background-color: $bg-start;
  border: none;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  
  &:hover {
    background-color: #3c415c;
    svg {
      transition: transform .15s;
    }
  }
  svg {
    position: absolute;
    top: 15px;
    right: 10px;
    height: 40px;
    width: auto;
    transition: transform .15s;
  }
  
  &.clicked {
    background-color: $bg-end;
    animation: bouncy .3s;
    cursor: default;

    svg {
      animation: to-the-moon .8s linear;
      top: -500px;
      path {
        fill: #6AAA3B;
      }
    }
  }
}

@keyframes to-the-moon {
  0%   {top: 13px;
         height: 30px; }
  5%   { top: 13px;
         height: 30px; }
  20%   {top: 13px;
          height: 45px; }  
  40%   {
          top: -40px;
          opacity: 1; }
  100% {
         top: -200px;
         height: 0;
         opacity: 1; }
}

@keyframes bouncy {
  50% { top: 6px; }
  100% { top: -6px; }
}


/*  sm btn styles  */
.twitter-btn {
  position: fixed; margin: auto;
  bottom: 0;
  background-color: #1da1f2;
  border: 0.15em solid #1da1f2;
   border-left: none;
  border-bottom: none;
  border-radius: 0% 100% 0% 0% / 0% 100% 0% 93% ;
    height: 50px;
  width: 50px;
  cursor: pointer;
}
.in-btn {
  position: fixed; margin: auto;
  bottom: 0; right: 0;
  border: 0.15em solid #0072b1;
  border-right: none;
  border-bottom: none;
  border-radius: 100% 0% 0% 0% / 100% 0% 0% 0% ;
  background-color: #0072b1;
    height: 50px;
  width: 50px;
  cursor: pointer;
}
.fa-twitter {
  position: absolute;
  left: 0em; right: .4em; top: .5em; bottom: 0;
  color: #fff;
  font-size: 1.8em;
}
.fa-linkedin-in {
   position: absolute;
  left: .4em; right: 0em; top: .55em; bottom: 0;
  color: #fff;
  font-size: 1.8em;
}
.in-btn:hover {
 background-color: #000;
}
.twitter-btn:hover {
  background-color: #000;
}

$('button').click(function() {
  $(this).toggleClass('clicked');
  $('button p').text(function(i, text) {
    return text === "SENT!" ? "SEND MSG" : "SENT!";
  });
});