<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<label class="terminal-button">
  <input type="checkbox">
  <span class="terminal-text">
    TOGGLE ME
  </span>
  <span class="terminal-state">
    DONE
  </span>
</label>

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

.terminal-button{position:relative;display:block;width:158px;padding:14px 17px;overflow:hidden;border-radius:8px;border:1px solid #3a414d;background:#1a1d22;color:#d6d6d8;font:800 19px Arial;cursor:pointer;box-shadow:inset 0 1px #ffffff10}.terminal-button input{position:absolute;opacity:0}.terminal-state{position:absolute;inset:0;display:grid;place-items:center;background:#202e29;color:#75efb0;transform:translateY(100%);transition:.3s}.terminal-button:hover{border-color:#67717e;background:#22262d}.terminal-button input:checked~.terminal-text{opacity:0}.terminal-button input:checked~.terminal-state{transform:translateY(0);box-shadow:inset 0 0 13px #75efb033}