<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<button class="scene-slate-btn">
  <span class="slate-top">
    <i>
    </i>
    <i>
    </i>
    <i>
    </i>
  </span>
  <span class="slate-body">
    Start scene
    <b>
      ▶
    </b>
  </span>
</button>

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

.scene-slate-btn{position:relative;display:grid;width:202px;padding:0;border:2px solid #222;border-radius:7px;background:#222;color:#fff;font:800 16px Arial,sans-serif;cursor:pointer;overflow:visible;box-shadow:5px 5px 0 #e4b95d;transition:transform .25s,box-shadow .25s}.slate-top{position:relative;z-index:2;display:flex;gap:10px;height:19px;padding:0 9px;overflow:hidden;border-radius:5px 5px 0 0;background:#f4f1e7;transform-origin:left bottom;transition:transform .38s cubic-bezier(.3,1.5,.5,1)}.slate-top i{display:block;width:12px;height:32px;background:#222;transform:rotate(30deg)}.slate-body{display:flex;align-items:center;justify-content:space-between;padding:13px 14px}.slate-body b{color:#f1c45d;font-size:14px}.scene-slate-btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #e4b95d}.scene-slate-btn:hover .slate-top{transform:rotate(-18deg)}.scene-slate-btn:active{transform:translate(4px,4px);box-shadow:1px 1px 0 #e4b95d}