<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<label class="waypoint-input">
  <span>
    ⌖
  </span>
  <input type="text" placeholder="Choose a waypoint">
  <b>
    ↗
  </b>
</label>

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

.waypoint-input{display:flex;align-items:center;gap:10px;width:267px;padding:9px 12px;border-radius:10px;background:#e7ecdc;color:#435f49;font-family:Arial;box-shadow:0 7px 13px #6b806335;transition:transform .3s}.waypoint-input span{display:grid;place-items:center;width:31px;height:31px;border-radius:50% 50% 50% 0;background:#ee7e66;color:#fff;font-size:18px;transform:rotate(-45deg);transition:transform .35s}.waypoint-input span::first-letter{transform:rotate(45deg)}.waypoint-input input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#435f49;font-size:14px}.waypoint-input b{font-size:18px;color:#6e9c74}.waypoint-input:hover{transform:perspective(500px) rotateX(5deg) translateY(-3px)}.waypoint-input:hover span{transform:rotate(-45deg) translateY(-5px)}