<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<label class="prism-depth">
  <small>
    PROJECT TITLE
  </small>
  <input type="text" placeholder="Untitled project">
  <i>
    ◆
  </i>
</label>

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

.prism-depth{position:relative;display:block;width:270px;padding:14px 15px;border:2px solid #6856b8;border-radius:8px;background:#292341;color:#fff;font-family:Arial;box-shadow:5px 5px 0 #493c84,10px 10px 0 #342a63;transition:transform .3s,box-shadow .3s}.prism-depth::before{content:"";position:absolute;inset:4px;border:1px solid #a79aff55;pointer-events:none}.prism-depth small{font-size:8px;font-weight:800;letter-spacing:1px;color:#bfb5ff}.prism-depth input{width:90%;margin-top:6px;border:0;outline:0;background:transparent;color:#fff;font-size:15px}.prism-depth input::placeholder{color:#8c82b5}.prism-depth i{position:absolute;right:15px;bottom:14px;color:#7ef4df;font-style:normal}.prism-depth:hover{transform:perspective(500px) rotateX(6deg) rotateY(5deg) translate(-3px,-3px);box-shadow:8px 8px 0 #493c84,15px 15px 0 #342a63}.prism-depth:focus-within{border-color:#7ef4df}