<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<label class="liquid-input">
  <small>
    NEW COLLECTION
  </small>
  <input type="text" placeholder="Collection name">
  <i>
  </i>
</label>

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

.liquid-input{position:relative;display:block;width:266px;padding:13px 15px;overflow:hidden;border:2px solid #5478b9;border-radius:14px;background:#f4f8ff;color:#3f5a93;font-family:Arial}.liquid-input>*:not(i){position:relative;z-index:2}.liquid-input small{font-size:8px;font-weight:800;letter-spacing:1px}.liquid-input input{display:block;width:100%;margin-top:6px;border:0;outline:0;background:transparent;color:#3f5a93;font-size:15px}.liquid-input i{position:absolute;z-index:1;left:-10%;bottom:-36px;width:120%;height:55px;border-radius:48%;background:#8de0d555;transition:bottom .55s}.liquid-input:focus-within i{bottom:-21px}.liquid-input:focus-within{border-color:#52bdb1}