Interactables

Image as button

<a target="_blank" rel="noopener noreferrer nofollow" href="LINK DESTINATION"><img src="LINK" alt="ALT TEXT"></a>

Replace LINK DESTINATION with the link you want the button to lead to.

LINK with the image/gif link. Make sure the link ends in a file type (.png, .jpg, .gif). Make use of file hosting sites like imgur to upload your image and to get a link.

And ALT TEXT with the text you want displayed when you hover over it or when the image doesn't load.

Examples on Iorveths' profile. Aka these images:

Button base code (originally 'simple white button')

Credits to: Oishiidesu

The following code is one way to create a working white button. It can be used as a basis to create your own buttons.

First, the CSS portion of the code; this code needs to be put in a <style> tag:

<style>
.pressable-button {
display: inline-block;
padding: 10px 20px;
background-color: white;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
text-align: center; /* Center text in the button */
text-decoration: none; /* Remove underline from text */
color: black; /* Set text color */
font-family: sans-serif; /* Set font */
}
/* Change COLOR to whatever color you want. */
.pressable-button:hover {
background-color: COLOR; /* background color when you hover over the button */
}
.pressable-button:active {
background-color: COLOR; /* background color of the button after you click on it */
}
</style>

Second, the HTML portion of the code. This will turn into the button and can be placed anywhere within the editor outside of <style>

<a href="LINK" class="pressable-button">Press Me</a>

Drop down text/expandable section in bio (Details)

This text also involves coding in HTML (though it's easy, trust me). While I will show you how to do this I recommend going to w3schools for the Details page or in general how to style it.

To add the expandable section you make use of the following code (HTML):

<details>
<summary>TITLE OF SECTION</summary>
CONTENTS OF THE SECTION
</details>

Note that the code above does not belong within <style>. This element will also display within your bio automatically as well.

Replace all capitalized words with the content that you want. You can either do text, images, or both. To put in image, you can use this code:<img src="IMAGE LINK" alt="TITLE OR DESCRIPTION OF THE IMAGE">

And when you're typing text, I highly recommend doing:

<p> TEXT HERE </p>

To style the title or the content, you will make use of the usual format we used to style the other elements of our profile. So, like this:

CLASS ID {
PROPERTIES AND VALUES
}

This code will of course belong within <style>.

If you chose to stick with text for the contents, you can make the text bold, italicized, and etc with HTML, but for further styling you'd have to use CSS

PROPERTIES AND VALUES

Properties are stuff like background-color and padding, whereas values are what we set them as (so, red and 5px according to the earlier examples). There's no way I'll list ALL of the properties you can/should use, so I'll again, point you towards w3schools, w3schools' example on how to style it or even ChatGPT to figure out a way to style, however I'll give you the base code with labels.

<style>
/* Container of the content */
details {
}
/* Title container and text */
details > summary {
}

/* Styling for the content */
details > p {
}
</style>

To remove or replace the arrow that displays on default next to the title, you can either:

Put this property under details > summary:

list-style: none; (for no arrow)

Or go to these pages to replace them:

Examples for changing the list style

Examples on how to set your custom bullet using your own images

Updated on: 01/08/2025