<!--
  Author: @codepeek
  License: MIT
  Tags: #neumorphism
-->
<button class="magnet-pull-btn">
  <span class="magnet-pole pole-left">
    −
  </span>
  <b>
    Connect
  </b>
  <span class="magnet-pole pole-right">
    +
  </span>
</button>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #neumorphism
 */

.magnet-pull-btn{display:flex;align-items:center;gap:20px;padding:8px 12px;border:0;border-radius:999px;background:#edf0f7;color:#263047;font:800 16px Arial,sans-serif;cursor:pointer;box-shadow:7px 7px 14px #c7ccd8,-7px -7px 14px #fff;transition:gap .35s cubic-bezier(.3,1.5,.5,1),transform .2s}.magnet-pole{display:grid;place-items:center;width:37px;height:37px;border-radius:50%;color:#fff;font-size:22px;box-shadow:inset 3px 3px 5px #ffffff55,0 4px 7px #26304737}.pole-left{background:#ec6271}.pole-right{background:#537de3}.magnet-pull-btn:hover{gap:5px;transform:translateY(-3px)}.magnet-pull-btn:active{transform:translateY(1px)}