Link Buttons Tutorial

Getting a simple button with your referral link is super easy.

Simple Button Link (HTML)

Pro Tip: This method uses basic HTML button and link elements for simplicity, but you can do more if you HTML Events or customize styling with a CSS Button.

RSI Referral Button

Simple one line of basic HTML code.

Replace STAR-XXXX-XXXX with your referral code.

<a href="https://robertsspaceindustries.com?referral=STAR-XXXX-XXXX" target="_blank"><button id="referralButton" type="button">STAR-XXXX-XXXX</button></a>

Discord Invite Button

Simple one line of basic HTML code.

Replace nTxQxYGWr3 with your Discord invite code.

<a href="https://discord.gg/nTxQxYGWr3" target="_blank"><button id="discordButton"  type="button">Discord</button></a>

Advanced Button Link (JS)

This button uses JavaScript and opens up more possibilities to improve user experience and capabilties.

RSI Referral Button

Replace STAR-XXXX-XXXX with your referral code.

<button id="referralButton" type="button">STAR-XXXX-XXXX</button>
<script>
document.getElementById('referralButton').addEventListener('click', function() {
    window.open('https://robertsspaceindustries.com?referral=STAR-XXXX-XXXX', '_blank');
});
</script>

Discord Invite Button

Replace nTxQxYGWr3 with your Discord invite code.

<button id="discordButton" type="button">Discord</button>
<script>
document.getElementById('discordButton').addEventListener('click', function() {
    window.open('https://discord.gg/nTxQxYGWr3', '_blank');
});
</script>

Read more about DOM Event Listeners here.

Stylized Button Link (CSS)

Use this code along with your simple or advanced button elements to create compelling styles that match your site color scheme.

RSI Referral Button

button#referralButton { /* This targets just your referralButton */
    background-color: #4682b4;
}
button { /* This is for all button elements */
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    background-color: #008CBA; /* Change to your preferred color */
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
button:hover { /*Mouse Over */
    background-color: #007B9A;
}
button:active { /*Mouse Click*/
    background-color: #005F73;
}

Discord Invite Button

button#discordButton {
    background-color: #5865F2;
}
button { /* This is for all button elements */
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    background-color: #008CBA; /* Change to your preferred color */
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
button:hover { /*Mouse Over */
    background-color: #007B9A;
}
button:active { /*Mouse Click*/
    background-color: #005F73;
}

Read more about how to customize CSS Buttons here.