<button>
  <svg class="rocket" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
    <title>
      Rocket
    </title>
    <desc>A simple, flat illustration of a rocket.</desc>
    <path d="M37.158 25.51a47.724 47.724 0 0 1-4.316 14.78 6.56 6.56 0 0 1 2.728 3.227c.758 2.886-1.274 5.526.638 6.378 1.4.623 4.463-1.276 6.8-12.114 1.868-8.652-3.575-11.48-5.85-12.27zM17.257 40.23a47.636 47.636 0 0 1-4.293-14.762c-2.195.73-7.874 3.5-5.973 12.312 2.338 10.84 5.4 12.737 6.8 12.114 1.915-.852-.118-3.49.64-6.378a6.63 6.63 0 0 1 2.827-3.287zM23.213 44.275c.158 3.162 1.013 5.5 2.046 5.5s1.888-2.337 2.046-5.5zM25.15 0h-.175c-14.167 7.38-11.05 25.224-11.05 25.224a43.544 43.544 0 0 0 6.234 18h9.808a43.56 43.56 0 0 0 6.234-18S39.32 7.38 25.15 0zm-.08 22.863a2.236 2.236 0 1 1 2.237-2.237 2.236 2.236 0 0 1-2.237 2.237zM25 14.345a3.78 3.78 0 1 1 3.78-3.78 3.78 3.78 0 0 1-3.78 3.78z"/>
  </svg>
</button>

body { 
  background-color: #4D4250; 
}

button {
  border: none;
  background-color: #F7D260;
  border-radius: 100rem; /* Ensures that border radius will always render a circle */

  border-bottom: 12px solid #DDBC56;
  
  transition: 
    background-color 150ms ease-in-out,
    border-color 150ms ease-in-out;

  /* Centers horizontally and vertically */
  height: 12.5rem;
  width: 12.5rem;
  margin: auto;
  position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

button:hover {
  background-color: #DDBC56;
  border-bottom-color: #C4A64D;
}

button:focus,
button:active {
  background-color: #C4A64D;
  border-bottom: 8px solid #AB9143;
  transition: none;
}

button .rocket {
  fill: #4D4250;
  height: 7rem;
  width: 7rem;
}