<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<label class="crystal-input">
  <small>
    DISPLAY NAME
  </small>
  <input type="text" placeholder="Enter your name">
  <i>
    ✦
  </i>
</label>

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

.crystal-input{position:relative;display:block;width:265px;padding:12px 15px;border:1px solid #ffffffaa;border-radius:13px;background:linear-gradient(135deg,#9cc9ff88,#c99cff77);box-shadow:8px 10px 18px #7462b944,inset 1px 1px #fff;backdrop-filter:blur(8px);font-family:Arial;transform-style:preserve-3d;transition:transform .35s}.crystal-input small{font:800 8px Arial;letter-spacing:1px;color:#fff}.crystal-input input{display:block;width:100%;margin-top:6px;border:0;outline:0;background:transparent;color:#fff;font-size:15px}.crystal-input input::placeholder{color:#ffffffaa}.crystal-input i{position:absolute;right:15px;top:25px;color:#fff;font-style:normal}.crystal-input:hover{transform:perspective(500px) rotateX(7deg) rotateY(-8deg) translateY(-4px)}.crystal-input:focus-within{box-shadow:11px 13px 24px #7462b955,inset 1px 1px #fff,0 0 0 3px #fff6}