<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<button class="compass-route-btn">
  <span class="compass-dial">
    <i>
    </i>
  </span>
  <span>
    Find route
  </span>
  <b>
    ↗
  </b>
</button>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.compass-route-btn{display:flex;align-items:center;gap:12px;padding:8px 15px 8px 8px;border:0;border-radius:999px;background:#1d4354;color:#f4fbf7;font:800 16px Arial,sans-serif;cursor:pointer;box-shadow:0 8px 16px #1533403d;transition:background .25s,transform .25s}.compass-dial{position:relative;display:grid;place-items:center;width:40px;height:40px;border:2px solid #d8f5df;border-radius:50%;background:#326779;box-shadow:inset 0 0 0 5px #255566}.compass-dial::before,.compass-dial::after{content:"";position:absolute;background:#bce8cf}.compass-dial::before{width:2px;height:27px}.compass-dial::after{height:2px;width:27px}.compass-dial i{position:relative;z-index:1;width:0;height:0;border-style:solid;border-width:0 5px 16px;border-color:transparent transparent #ffbd68;transform:rotate(42deg);transform-origin:50% 75%;transition:transform .45s cubic-bezier(.3,1.5,.5,1)}.compass-route-btn b{font-size:20px}.compass-route-btn:hover{background:#286273;transform:translateY(-3px)}.compass-route-btn:hover .compass-dial i{transform:rotate(222deg)}.compass-route-btn:active{transform:translateY(1px)}