<div class="zap">
    <button id="nostr-zap-target" aria-label="Zap(ビットコインの投げ銭)ボタン"
            data-npub="npub1a3pvwe2p3v7mnjz6hle63r628wl9w567aw7u23fzqs062v5vqcqqu3sgh3"
            data-note-id="note1pqk7a5j2lc2rduz4k4468xgsccg5sru8uja7uvxr6eh9zwz0xtlqh5y9ly"
            data-relays="wss://nostr.mutinywallet.com,wss://relay.nostr.band,wss://relayable.org,wss://nos.lol,wss://nostr.bitcoiner.social,wss://yabu.me,wss://nostr-relay.nokotaro.com,wss://relay.nostr.wirednet.jp">
        Zap
    </button>
    <a class="zap-list"
href="https://new.nostr.band/note1pqk7a5j2lc2rduz4k4468xgsccg5sru8uja7uvxr6eh9zwz0xtlqh5y9ly?overview=zaps-received"
       target="_blank">
        Zap一覧
    </a>
    <a class="zap-description" href="https://scrapbox.io/nostr/Zap" target="_blank">
        Zapとは
    </a>
</div>
<script src="https://cdn.jsdelivr.net/npm/nostr-zap@0.21.0"></script>
.zap {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    max-width: 630px;
    margin: auto;
}

#nostr-zap-target {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3D3D3D;
    font-size: 1rem;
    font-weight: bold;
    background-color: #F0F0F0;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    height: 52px;
    width: 70px;
    padding: 0;
}

.zap-list,
.zap-description {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3D3D3D;
    background-color: #F0F0F0;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    height: 52px;
    width: 100px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.