/* Code from https://csspro.com/css-3d-buttons */

/*<!-- HTML !-->
<button class="aqua" role="button">
  <span class="text">Button 2</span>
</button>*/

/* CSS */
.aqua {
  touch-action: manipulation !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  color: inherit !important;
  font: inherit !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  text-align: inherit !important;
  text-transform: inherit !important;
  -webkit-tap-highlight-color: transparent !important;
  display: inline-block !important;
}

.aqua:focus {
  outline-style: soli !important;
  outline-color: transparent !important;
}

.aqua {
  touch-action: manipulation !important;
  margin: 3px !important;
  cursor: pointer !important;
}

.aqua {
  touch-action: manipulation !important;
  border: 1px solid #0360df !important;
  border-radius: 50px !important;
  padding: 12px 16px !important;
  background-color: #0360df !important;
  background-image: radial-gradient(75% 50% at 50% 0%, #f4feff 12%, transparent), radial-gradient(75% 50% at 50% 85%, #8de3fc, transparent) !important;
  box-shadow: inset 0 0 2px 1px rgba(255, 255, 255, 0.2), 0 1px 4px 1px rgba(17, 110, 231, 0.2), 0 1px 4px 1px rgba(0, 0, 0, 0.1) !important;
  color: #fff !important;
  text-shadow: 0 1px 1px #116ee7 !important;
  transition-property: border-color, transform, background-color !important;
  transition-duration: 0.2s !important;
}

.aqua:hover {
  transform: scale(1.04) !important;
}

.aqua:active {
  border-color: #0048d5 !important;
  transform: scale(0.96) !important;
  background-color: #0048d5 !important;
}