◉ 0 views

1 line⌘Z Undo

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<button class="signal-capsule-btn">
  <span class="signal-icon">
    ⌁
  </span>
  <span>
    Send signal
  </span>
  <i>
  </i>
</button>

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<button class="signal-capsule-btn">
  <span class="signal-icon">
    ⌁
  </span>
  <span>
    Send signal
  </span>
  <i>
  </i>
</button>

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

.signal-capsule-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:11px;min-width:238px;padding:15px 22px;border:5px solid #38e2b4;border-radius:999px;background-color:#10151d;background-image:radial-gradient(#34404f 1.5px,transparent 1.5px);background-size:14px 14px;color:#f5fffd;font:800 18px Arial,sans-serif;cursor:pointer;box-shadow:0 0 0 6px #10151d,0 0 0 10px #f4f0e7;transition:transform .25s,box-shadow .25s}.signal-icon{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#38e2b4;color:#102229;font-size:22px;line-height:1;animation:signal-pulse 1.5s ease-in-out infinite}.signal-capsule-btn i{width:8px;height:8px;border-radius:50%;background:#38e2b4;box-shadow:0 0 9px #38e2b4}.signal-capsule-btn:hover{transform:translateY(-4px);box-shadow:0 0 0 6px #10151d,0 0 0 10px #f4f0e7,0 11px 22px #38e2b45c}.signal-capsule-btn:active{transform:translateY(1px)}@keyframes signal-pulse{0%,100%{box-shadow:0 0 0 0 #38e2b455}50%{box-shadow:0 0 0 8px #38e2b400}}

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

.signal-capsule-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:11px;min-width:238px;padding:15px 22px;border:5px solid #38e2b4;border-radius:999px;background-color:#10151d;background-image:radial-gradient(#34404f 1.5px,transparent 1.5px);background-size:14px 14px;color:#f5fffd;font:800 18px Arial,sans-serif;cursor:pointer;box-shadow:0 0 0 6px #10151d,0 0 0 10px #f4f0e7;transition:transform .25s,box-shadow .25s}.signal-icon{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#38e2b4;color:#102229;font-size:22px;line-height:1;animation:signal-pulse 1.5s ease-in-out infinite}.signal-capsule-btn i{width:8px;height:8px;border-radius:50%;background:#38e2b4;box-shadow:0 0 9px #38e2b4}.signal-capsule-btn:hover{transform:translateY(-4px);box-shadow:0 0 0 6px #10151d,0 0 0 10px #f4f0e7,0 11px 22px #38e2b45c}.signal-capsule-btn:active{transform:translateY(1px)}@keyframes signal-pulse{0%,100%{box-shadow:0 0 0 0 #38e2b455}50%{box-shadow:0 0 0 8px #38e2b400}}

Signal Capsule Button

Buttons

A futuristic dark capsule button with a pulsing signal beacon, dotted texture, and a bright cyan status border.

Donate to the creator

Open-source licenseMIT

Use, copy, modify, publish, distribute and sell this UI element in personal or commercial work.

Keep the original copyright and MIT notice in substantial copies. Provided “as is”, without warranty.

Read the MIT license

Used tags

#buttons #css #interface #opensource #codepeek

Community

Signal Capsule Button

Comments 0