“Send Message” buttons are traditionally boring. To provide immediate gratification to the user for submitting a form, we can animate an embedded SVG paper plane icon to jet completely off the button wrapper on hover!

Icon Jetting Logic

We utilize overflow: hidden on the button itself so the jet looks like it cleanly leaves the screen.

.send-btn {
  position: relative;
  overflow: hidden;
  padding: 15px 40px;
  background: #3b82f6;
  color: white;
}

.plane {
  display: inline-block;
  margin-left: 10px;
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.send-btn:hover .plane {
  /* Fires it up and to the right! */
  transform: translate(60px, -60px) scale(0.5);
}

Wait until you see how fast and snappy the jet lifts off inside the Live Demo! It even changes the button background to a soft sky-blue!