<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<label class="label-maker">
  <span>
    LABEL
  </span>
  <input type="text" placeholder="Kitchen shelf">
  <i>
  </i>
</label>

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

.label-maker{display:flex;align-items:center;width:274px;border-radius:6px;background:#d8d9d5;color:#25292a;font-family:Arial;box-shadow:inset 3px 3px 5px #b1b4b0,-3px -3px 6px #fff}.label-maker span{padding:14px 10px;background:#677a85;color:#fff;font:800 9px Arial;letter-spacing:1px}.label-maker input{flex:1;min-width:0;margin:7px;padding:8px;border:0;border-radius:2px;outline:0;background:#fafafa;color:#25292a;font:13px monospace;box-shadow:inset 1px 1px 3px #c5c5c5}.label-maker i{width:13px;height:29px;margin-right:8px;border-radius:3px;background:repeating-linear-gradient(0deg,#edce66 0 3px,#b9963c 4px 5px)}.label-maker:focus-within span{background:#536974}