<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<label class="magnet-input">
  <i>
    −
  </i>
  <input type="text" placeholder="Add a tag">
  <b>
    +
  </b>
</label>

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

.magnet-input{display:flex;align-items:center;gap:15px;width:245px;padding:8px 10px;border-radius:999px;background:#edf0f3;color:#374257;font-family:Arial;box-shadow:inset 3px 3px 6px #c6ccd5,-3px -3px 7px #fff}.magnet-input i,.magnet-input b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:#fff;font-size:19px;font-style:normal;transition:transform .35s}.magnet-input i{background:#e9767e}.magnet-input b{background:#637ee0}.magnet-input input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#374257;font-size:14px}.magnet-input:focus-within i{transform:translateX(11px)}.magnet-input:focus-within b{transform:translateX(-11px)}