button.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600">
  <defs>
    <filter id="gw" x="-50%" y="-10%" width="200%" height="120%"><feGaussianBlur stdDeviation="3"/><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter>
    <filter id="gg" x="-50%" y="-10%" width="200%" height="120%"><feGaussianBlur stdDeviation="5" result="b"/><feFlood flood-color="#00fe00" flood-opacity="0.5" result="c"/><feComposite in="c" in2="b" operator="in" result="cb"/><feMerge><feMergeNode in="cb"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
    <filter id="gr" x="-50%" y="-10%" width="200%" height="120%"><feGaussianBlur stdDeviation="5" result="b"/><feFlood flood-color="#ff0000" flood-opacity="0.5" result="c"/><feComposite in="c" in2="b" operator="in" result="cb"/><feMerge><feMergeNode in="cb"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
    <filter id="gy" x="-50%" y="-10%" width="200%" height="120%"><feGaussianBlur stdDeviation="5" result="b"/><feFlood flood-color="#fcf000" flood-opacity="0.5" result="c"/><feComposite in="c" in2="b" operator="in" result="cb"/><feMerge><feMergeNode in="cb"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
    <linearGradient id="iwr"><stop offset="0%" stop-color="#fff" stop-opacity="0.1"/><stop offset="100%" stop-color="#fff" stop-opacity="0"/></linearGradient>
    <linearGradient id="iwl" x1="1" x2="0"><stop offset="0%" stop-color="#fff" stop-opacity="0.1"/><stop offset="100%" stop-color="#fff" stop-opacity="0"/></linearGradient>
    <linearGradient id="igr"><stop offset="0%" stop-color="#00fe00" stop-opacity="0.12"/><stop offset="100%" stop-color="#00fe00" stop-opacity="0"/></linearGradient>
    <linearGradient id="igl" x1="1" x2="0"><stop offset="0%" stop-color="#00fe00" stop-opacity="0.12"/><stop offset="100%" stop-color="#00fe00" stop-opacity="0"/></linearGradient>
    <linearGradient id="irr"><stop offset="0%" stop-color="#ff0000" stop-opacity="0.12"/><stop offset="100%" stop-color="#ff0000" stop-opacity="0"/></linearGradient>
    <linearGradient id="irl" x1="1" x2="0"><stop offset="0%" stop-color="#ff0000" stop-opacity="0.12"/><stop offset="100%" stop-color="#ff0000" stop-opacity="0"/></linearGradient>
    <linearGradient id="iyr"><stop offset="0%" stop-color="#fcf000" stop-opacity="0.12"/><stop offset="100%" stop-color="#fcf000" stop-opacity="0"/></linearGradient>
    <linearGradient id="iyl" x1="1" x2="0"><stop offset="0%" stop-color="#fcf000" stop-opacity="0.12"/><stop offset="100%" stop-color="#fcf000" stop-opacity="0"/></linearGradient>
  </defs>

  <rect width="800" height="600" fill="#000"/>

  <!-- ═══════════════════════════════════════════════════════════ -->
  <!-- BUTTON ANATOMY (all distances in g, g=8px)                 -->
  <!--                                                             -->
  <!--  |s|  glow(3g)  |  pad(2g)  CONTENT  pad(2g)  |  glow(3g)  |s| -->
  <!--  g/4    24        16                  16         24        g/4  -->
  <!--                                                             -->
  <!--  s = saber line, g/4 = 2px                                  -->
  <!--  content start x = 2 + 24 + 16 = 42                        -->
  <!--  content end x = W - 42                                     -->
  <!--  content centered at x = W/2                                -->
  <!--  W = 84 + content_width                                     -->
  <!--  pad from saber edge to nearest glyph = 2g = 16. ALWAYS.   -->
  <!-- ═══════════════════════════════════════════════════════════ -->

  <!-- helper: draw one button. args via transform. W computed per button. -->
  <!-- text-only buttons: content_width ≈ chars × 9px (Play 16px avg) -->
  <!-- Cancel=6×9=54 → W=138. Close=5×9=45 → W=129. Back=4×9=36 → W=120 -->
  <!-- Sign=4×9=36 → W=120. Stake=5×9=45 → W=129. Claim=5×9=45 → W=129 -->
  <!-- Send=4×9=36 → W=120. Delegate=8×9=72 → W=156 -->
  <!-- "Delete key 🗑" = 12×9=108 → W=192. "Burn 🔥" = 7×9=63 → W=147 -->
  <!-- Transfer=8×9=72 → W=156. Signing...=10×9=90 → W=174 -->

  <!-- ═══ ROW 1: NEUTRAL ═══ -->
  <!-- W: 138, 129, 120. gap=24. total=138+129+120+48=435. offset=(800-435)/2=182 -->
  <text x="400" y="24" font-family="Play, sans-serif" font-size="14" fill="#555" text-anchor="middle">neutral</text>
  <g transform="translate(182, 40)">
    <!-- Cancel W=138 -->
    <rect x="2" y="0" width="24" height="48" fill="url(#iwr)"/><rect x="0" y="0" width="2" height="48" fill="#fff" filter="url(#gw)"/>
    <text x="69" y="30" font-family="Play, sans-serif" font-size="16" fill="#fff" text-anchor="middle">Cancel</text>
    <rect x="112" y="0" width="24" height="48" fill="url(#iwl)"/><rect x="136" y="0" width="2" height="48" fill="#fff" filter="url(#gw)"/>
    <!-- Close W=129 @ x=162 -->
    <rect x="164" y="0" width="24" height="48" fill="url(#iwr)"/><rect x="162" y="0" width="2" height="48" fill="#fff" filter="url(#gw)"/>
    <text x="226" y="30" font-family="Play, sans-serif" font-size="16" fill="#fff" text-anchor="middle">Close</text>
    <rect x="267" y="0" width="24" height="48" fill="url(#iwl)"/><rect x="289" y="0" width="2" height="48" fill="#fff" filter="url(#gw)"/>
    <!-- Back W=120 @ x=315 -->
    <rect x="317" y="0" width="24" height="48" fill="url(#iwr)"/><rect x="315" y="0" width="2" height="48" fill="#fff" filter="url(#gw)"/>
    <text x="375" y="30" font-family="Play, sans-serif" font-size="16" fill="#fff" text-anchor="middle">Back</text>
    <rect x="411" y="0" width="24" height="48" fill="url(#iwl)"/><rect x="433" y="0" width="2" height="48" fill="#fff" filter="url(#gw)"/>
  </g>

  <!-- ═══ ROW 2: CONFIRM ═══ -->
  <!-- W: 120,129,129,120,156. gap=24. total=654+96=750. offset=(800-750)/2=25 -->
  <rect x="40" y="104" width="720" height="1" fill="#1a1a1a"/>
  <text x="400" y="128" font-family="Play, sans-serif" font-size="14" fill="#555" text-anchor="middle">confirm</text>
  <g transform="translate(25, 144)">
    <!-- Sign W=120 -->
    <rect x="2" y="0" width="24" height="48" fill="url(#igr)"/><rect x="0" y="0" width="2" height="48" fill="#00fe00" filter="url(#gg)"/>
    <text x="60" y="30" font-family="Play, sans-serif" font-size="16" fill="#00fe00" text-anchor="middle">Sign</text>
    <rect x="96" y="0" width="24" height="48" fill="url(#igl)"/><rect x="118" y="0" width="2" height="48" fill="#00fe00" filter="url(#gg)"/>
    <!-- Stake W=129 @ x=144 -->
    <rect x="146" y="0" width="24" height="48" fill="url(#igr)"/><rect x="144" y="0" width="2" height="48" fill="#00fe00" filter="url(#gg)"/>
    <text x="208" y="30" font-family="Play, sans-serif" font-size="16" fill="#00fe00" text-anchor="middle">Stake</text>
    <rect x="249" y="0" width="24" height="48" fill="url(#igl)"/><rect x="271" y="0" width="2" height="48" fill="#00fe00" filter="url(#gg)"/>
    <!-- Claim W=129 @ x=297 -->
    <rect x="299" y="0" width="24" height="48" fill="url(#igr)"/><rect x="297" y="0" width="2" height="48" fill="#00fe00" filter="url(#gg)"/>
    <text x="361" y="30" font-family="Play, sans-serif" font-size="16" fill="#00fe00" text-anchor="middle">Claim</text>
    <rect x="402" y="0" width="24" height="48" fill="url(#igl)"/><rect x="424" y="0" width="2" height="48" fill="#00fe00" filter="url(#gg)"/>
    <!-- Send W=120 @ x=450 -->
    <rect x="452" y="0" width="24" height="48" fill="url(#igr)"/><rect x="450" y="0" width="2" height="48" fill="#00fe00" filter="url(#gg)"/>
    <text x="510" y="30" font-family="Play, sans-serif" font-size="16" fill="#00fe00" text-anchor="middle">Send</text>
    <rect x="546" y="0" width="24" height="48" fill="url(#igl)"/><rect x="568" y="0" width="2" height="48" fill="#00fe00" filter="url(#gg)"/>
    <!-- Delegate W=156 @ x=594 -->
    <rect x="596" y="0" width="24" height="48" fill="url(#igr)"/><rect x="594" y="0" width="2" height="48" fill="#00fe00" filter="url(#gg)"/>
    <text x="672" y="30" font-family="Play, sans-serif" font-size="16" fill="#00fe00" text-anchor="middle">Delegate</text>
    <rect x="726" y="0" width="24" height="48" fill="url(#igl)"/><rect x="748" y="0" width="2" height="48" fill="#00fe00" filter="url(#gg)"/>
  </g>

  <!-- ═══ ROW 3: DANGER ═══ -->
  <!-- "Delete key 🗑" = 12glyphs ≈ 108px → W=192. "Burn 🔥" = 7glyphs ≈ 63px → W=147 -->
  <!-- total=192+24+147=363. offset=(800-363)/2=218 -->
  <rect x="40" y="208" width="720" height="1" fill="#1a1a1a"/>
  <text x="400" y="232" font-family="Play, sans-serif" font-size="14" fill="#555" text-anchor="middle">danger</text>
  <g transform="translate(218, 248)">
    <!-- Delete key 🗑 W=192 -->
    <rect x="2" y="0" width="24" height="48" fill="url(#irr)"/><rect x="0" y="0" width="2" height="48" fill="#ff0000" filter="url(#gr)"/>
    <text x="96" y="30" font-family="Play, sans-serif" font-size="16" fill="#ff0000" text-anchor="middle">Delete key 🗑</text>
    <rect x="166" y="0" width="24" height="48" fill="url(#irl)"/><rect x="190" y="0" width="2" height="48" fill="#ff0000" filter="url(#gr)"/>
    <!-- Burn 🔥 W=147 @ x=216 -->
    <rect x="218" y="0" width="24" height="48" fill="url(#irr)"/><rect x="216" y="0" width="2" height="48" fill="#ff0000" filter="url(#gr)"/>
    <text x="289" y="30" font-family="Play, sans-serif" font-size="16" fill="#ff0000" text-anchor="middle">Burn 🔥</text>
    <rect x="339" y="0" width="24" height="48" fill="url(#irl)"/><rect x="361" y="0" width="2" height="48" fill="#ff0000" filter="url(#gr)"/>
  </g>

  <!-- ═══ ROW 4: CAUTION ═══ -->
  <!-- Transfer W=156. offset=(800-156)/2=322 -->
  <rect x="40" y="312" width="720" height="1" fill="#1a1a1a"/>
  <text x="400" y="336" font-family="Play, sans-serif" font-size="14" fill="#555" text-anchor="middle">caution</text>
  <g transform="translate(322, 352)">
    <rect x="2" y="0" width="24" height="48" fill="url(#iyr)"/><rect x="0" y="0" width="2" height="48" fill="#fcf000" filter="url(#gy)"/>
    <text x="78" y="30" font-family="Play, sans-serif" font-size="16" fill="#fcf000" text-anchor="middle">Transfer</text>
    <rect x="132" y="0" width="24" height="48" fill="url(#iyl)"/><rect x="154" y="0" width="2" height="48" fill="#fcf000" filter="url(#gy)"/>
  </g>

  <!-- ═══ ROW 5: STATES ═══ -->
  <!-- disabled Sign W=120, hover Sign W=120, loading Signing... W=174 -->
  <!-- total=120+24+120+24+174=462. offset=(800-462)/2=169 -->
  <rect x="40" y="416" width="720" height="1" fill="#1a1a1a"/>
  <text x="400" y="440" font-family="Play, sans-serif" font-size="14" fill="#555" text-anchor="middle">states</text>
  <g transform="translate(169, 460)">
    <!-- disabled Sign W=120 -->
    <rect x="0" y="0" width="2" height="48" fill="#4b4b4d"/>
    <text x="60" y="30" font-family="Play, sans-serif" font-size="16" fill="#4b4b4d" text-anchor="middle">Sign</text>
    <rect x="118" y="0" width="2" height="48" fill="#4b4b4d"/>
    <text x="60" y="68" font-family="Play, sans-serif" font-size="10" fill="#555" text-anchor="middle">disabled</text>
    <!-- hover Sign W=120 @ x=144 -->
    <rect x="146" y="0" width="24" height="48" fill="url(#igr)"/><rect x="144" y="0" width="2" height="48" fill="#00fe00" filter="url(#gg)"/>
    <text x="204" y="30" font-family="Play, sans-serif" font-size="16" fill="#00fe00" text-anchor="middle">Sign</text>
    <rect x="240" y="0" width="24" height="48" fill="url(#igl)"/><rect x="262" y="0" width="2" height="48" fill="#00fe00" filter="url(#gg)"/>
    <text x="204" y="68" font-family="Play, sans-serif" font-size="10" fill="#555" text-anchor="middle">hover</text>
    <!-- loading Signing... W=174 @ x=288 -->
    <rect x="290" y="0" width="24" height="48" fill="url(#igr)"/><rect x="288" y="0" width="2" height="48" fill="#00fe00" filter="url(#gg)" opacity="0.5"/>
    <text x="375" y="30" font-family="Play, sans-serif" font-size="16" fill="#00fe00" opacity="0.5" text-anchor="middle">Signing...</text>
    <rect x="438" y="0" width="24" height="48" fill="url(#igl)"/><rect x="460" y="0" width="2" height="48" fill="#00fe00" filter="url(#gg)" opacity="0.5"/>
    <text x="375" y="68" font-family="Play, sans-serif" font-size="10" fill="#555" text-anchor="middle">loading</text>
  </g>

</svg>