<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<button class="morse-key-btn">
  <span class="morse-key">
    <i>
    </i>
  </span>
  <span>
    Transmit
  </span>
  <b>
    ··−
  </b>
</button>

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

.morse-key-btn{display:flex;align-items:center;gap:11px;padding:10px 15px;border:0;border-radius:8px;background:#173b3b;color:#e7f5d9;font:800 16px Arial,sans-serif;cursor:pointer;box-shadow:0 5px 0 #0c2427;transition:transform .15s,box-shadow .15s}.morse-key{position:relative;width:31px;height:27px;border-bottom:5px solid #c69a57}.morse-key::before{content:"";position:absolute;bottom:4px;left:3px;width:25px;height:5px;border-radius:5px;background:#f2cf85;transform-origin:left;transition:transform .18s}.morse-key i{position:absolute;bottom:8px;left:18px;width:6px;height:12px;border-radius:4px;background:#e2b86d}.morse-key-btn b{font:800 16px monospace;color:#73e0c6;letter-spacing:2px;opacity:.55;transition:opacity .2s}.morse-key-btn:hover .morse-key::before{transform:rotate(13deg)}.morse-key-btn:hover b{opacity:1;animation:morse-blink .5s steps(2) infinite}.morse-key-btn:active{transform:translateY(5px);box-shadow:none}@keyframes morse-blink{50%{color:#fff}}