cardex

Bio buttons collection

byRocket499
· on JanitorAI· · archived

Tokens: 2,642 permanent · 29 first greeting · budget 2,671

Creator notes

this bot is a much better collection of codes for your bio. Definitely recommend taking a look

Update: Cleaned out expired codes, added new buttons. going forward any instructions will be added to the personality area. I have no desire to create another tutorial image.

PS Sorry for the ping about this being updated. I figure people might wanna know since it is a big update with a bunch of new buttons

⚠️Quick note if you just want to copy the button directly into your shell the copy from the to instead of the

⚠️

external image: ella.janitorai.com

This is just a bot I use to test bio buttons and such. Figured I'd share it for everyone to use. The button info is located in the personality section just copy and paste into your own bots when you edit it. Change the BUTTON # to what you want it to say and the LINK GOES HERE to whatever link you want. Some dont show on mobile while they do on pc and vice versa

Also you can change the rgb value so it isn't red. Either directly in the code or using the color slider in your edit bot tools

Edit the text inside the code. Doing so in the bio itself may break the button.

Anyways enough yapping Have fun making your bios look better

BUTTON 3

Button 4

BUTTON 6

BUTTON 7

BUTTON 8

Button 9



Below are just some custom buttons I made using codes from Deers collection. You can mix the codes yourself to make new buttons that fuse elements from the parents.


































Glowing hover. black

external image: ella.janitorai.com

Not a button but a a bio decoration. images, text, links, other buttons can be inserted inside. to use this one you need a little bit coding knowledge. I am not smart and have brute forced it with chatgpt but I will try to explain it at the bottom of the page. there a few different shells to choose from. simply swap the class ID like I showed in the guide.

Black shell

The tutorial below is for this block

Text goes here.


Text goes here

Button 6.2
Text goes here

external image: ella.janitorai.com

Special thanks to Umi. this guide wouldn't exist without her initially using a button and trigging this little obsession so go show her some love

Goddess of frost Uminari

Rocket499View on JanitorAI Origin page

Description

this bot is a much better collection of codes for your bio. Definitely recommend taking a look

Update: Cleaned out expired codes, added new buttons. going forward any instructions will be added to the personality area. I have no desire to create another tutorial image. PS Sorry for the ping about this being updated. I figure people might wanna know since it is a big update with a bunch of new buttons

⚠️Quick note if you just want to copy the button directly into your shell the copy from the to instead of the <p to

⚠️

This is just a bot I use to test bio buttons and such. Figured I'd share it for everyone to use. The button info is located in the personality section just copy and paste into your own bots </> when you edit it. Change the BUTTON # to what you want it to say and the LINK GOES HERE to whatever link you want. Some dont show on mobile while they do on pc and vice versa Also you can change the rgb value so it isn't red. Either directly in the code or using the color slider in your edit bot tools Edit the text inside the code. Doing so in the bio itself may break the button. Anyways enough yapping Have fun making your bios look better

BUTTON 1 BUTTON 2 BUTTON 3 Button 4 BUTTON 5 BUTTON 6 BUTTON 7 BUTTON 8 Button 9

Below are just some custom buttons I made using codes from Deers collection. You can mix the codes yourself to make new buttons that fuse elements from the parents. Basic gold

Dark purple

Red

Grey

Dark blue

Black/glow hover

Green

Mini grey

Mini Black/glow hover

Mini Green

Basic gold

Dark purple

Red

Grey

Dark blue

Black/glow hover

Green

Glowing hover. black

Not a button but a a bio decoration. images, text, links, other buttons can be inserted inside. to use this one you need a little bit coding knowledge. I am not smart and have brute forced it with chatgpt but I will try to explain it at the bottom of the page. there a few different shells to choose from. simply swap the class ID like I showed in the guide.

Black shell

The tutorial below is for this block

Text goes here.

Text goes here Button 6 Button 6.2 Text goes here

Special thanks to Umi. this guide wouldn't exist without her initially using a button and trigging this little obsession so go show her some love

Goddess of frost Uminari

Chats
420
Messages
639
Tokens (upstream)
2,664

Created Updated Archived since

  • 💁 Assistant
  • notabot
  • customization
  • holiday2025

Botton 1 ⤵️

  <h1 style="text-align: center;"><a target="_blank" rel="noopener noreferrer" class="glow-logo pp-top-bar-logo css-e8xvxi" href="LINK GOES HERE"><span style="color: rgb(29, 12, 49);"><mark data-color="rgb(29, 12, 49)" style="background-color: rgb(29, 12, 49); color: inherit;">BUTTON 1</mark></span></a></h1>

to use button 1 in event bots change the background color and mark data color to match the bot card color.

Button 2 ⤵️

  <h1 style="text-align: center;"><a target="_blank" rel="noopener noreferrer" class="glow-logo pp-top-bar-logo css-e8xvxi" href="LINK GOES HERE">BUTTON 2</a></h1>

Button 3 ⤵️

  <p style="text-align: center;"><a target="_blank" rel="noopener noreferrer" class="div Btn2-purple pp-pg-total" href="LINK GOES HERE"><span style="color: rgb(255, 0, 0);">BUTTON 3</span></a></p>

Button 4 ⤵️

  <h1 style="text-align: center;"><a target="_blank" rel="noopener noreferrer" class="Btn2 css-hxluyi" href="LINK GOES HERE"><span style="color: rgb(255, 233, 0);">BUTTON 4</span></a></h1>

Button 5 ⤵️

  <h1 style="text-align: center;"><a target="_blank" rel="noopener noreferrer" class="Btn pp-uc-follow-button" href="LINK GOES HERE"><span style="color: rgb(255, 0, 0);">BUTTON 5</span></a></h1>

Button 6 ⤵️

  <p style="text-align: center;"><a target="_blank" rel="noopener noreferrer" class="glow-on-hover pp-top-bar-create-char css-1yhasuw" href="LINK GOES HERE"><span style="color: rgb(255, 0, 0);">BUTTON 6</span></a></p><hr>

Button 7 ⤵️

  <p style="text-align: center;"><a target="_blank" rel="noopener noreferrer" class="chakra-button css-1vh5zal" href="LINK GOES HERE"><span style="color: rgb(255, 0, 0);">BUTTON 7</span></a></p>

Button 8 ⤵️

  <p style="text-align: center;"><a target="_blank" rel="noopener noreferrer" class="image-input-dropzone" href="LINK GOES HERE"><span style="color: rgb(255, 0, 0);">BUTTON 8</span></a></p>

Button 9 ⤵️

  <p style="text-align: center;"><a target="_blank" rel="noopener noreferrer" class="_modalButton_wpa9q_795 _danger_wpa9q_839" href="LINK GOES HERE"><span style="color: rgb(255, 0, 0);">BUTTON 9</span></a></p>

Markdown shell without buttons. enter your own stuff into the template in designated spots. ⤵️

  <p class="div _characterInfoMarkdownContent_123vi_223" style="text-align: center;"><a target="_blank" rel="noopener noreferrer" class="BUTTON CODE GOES HERE" href="LINK GOES HERE"><span style="color: rgb(255, 0, 0);">BUTTON TEXT GOES HERE</span></a><br><span style="color: rgb(255, 0, 0);">TEXT GOES HERE</span><br><br> <br></p>

I dont want to remake the tutorial image again. so to add more buttons/image spots copy and paste

This part for images.

BUTTON TEXT GOES HERE This part for buttons.

make sure to ad
between them
creates the empty line under the button if you put it after the code or on the top of the button if put it before.

Markdown shell from the tutorial ⤵️

  <p class="div _characterInfoMarkdownContent_123vi_223" style="text-align: center;">The tutorial below is for this block<br><br>Text goes here.<br><br><br>Text goes here<br><a target="_blank" rel="noopener noreferrer" class="Btn pp-uc-follow-button" href="LINK GOES HERE"> <span style="color: rgb(255, 0, 0);">Button 6</span></a><br><a target="_blank" rel="noopener noreferrer" class="div Btn2-purple pp-pg-total" href="LINK GOES HERE"> <span style="color: rgb(255, 0, 0);">Button 6.2</span></a><br>Text goes here</p>

Dark purple ⤵️

  <p style="text-align: center;"><a target="_blank" rel="noopener noreferrer" class="_characterInfoShinyBox_1yi4w_265 Btn pp-uc-follow-button" href="LINK GOES HERE"><span style="color: rgb(255, 0, 0);">BUTTON 6</span></a></p><hr>

Red ⤵️

  <p style="text-align: center;"><a target="_blank" rel="noopener noreferrer" class="Btn pp-uc-follow-button _moderationHeader_1s17f_360" href="LINK GOES HERE"><span style="color: rgb(255, 0, 0);">BUTTON 6</span></a></p>

Grey ⤵️

  <p style="text-align: center;"><a target="_blank" rel="noopener noreferrer" class="Btn pp-uc-follow-button _scheduledReleaseSection_1s17f_863" href="LINK GOES HERE"><span style="color: rgb(255, 0, 0);">BUTTON 6</span></a></p>

Dark Blue ⤵️

  <p style="text-align: center;"><a target="_blank" rel="noopener noreferrer" class="Btn pp-uc-follow-button _count_138g0_7" href="LINK GOES HERE"><span style="color: rgb(255, 0, 0);">BUTTON 6</span></a></p>

Black/glow hover ⤵️

  <p style="text-align: center;"><a target="_blank" rel="noopener noreferrer" class="Btn pp-uc-follow-button _archiveButton_di476_217" href="LINK GOES HERE"><span style="color: rgb(255, 0, 0);">BUTTON 6</span></a></p>

Green ⤵️

  <p style="text-align: center;"><a target="_blank" rel="noopener noreferrer" class="Btn pp-uc-follow-button div _betaBadge_ud2h5_65" href="LINK GOES HERE"><span style="color: rgb(255, 0, 0);">BUTTON 6</span></a></p>

Mini grey ⤵️

  <p style="text-align: center;"><a target="_blank" rel="noopener noreferrer" class="Btn pp-uc-follow-button div css-1d22cyw" href="LINK GOES HERE"><span style="color: rgb(255, 0, 0);">BUTTON 6</span></a></p>

mini Black/glow hover ⤵️

  <p style="text-align: center;"><a target="_blank" rel="noopener noreferrer" class="Btn pp-uc-follow-button _archiveButton_di476_217 div css-1d22cyw" href="LINK GOES HERE"><span style="color: rgb(255, 0, 0);">BUTTON 6</span></a></p>

mini green ⤵️

  <p style="text-align: center;"><a target="_blank" rel="noopener noreferrer" class="Btn pp-uc-follow-button div _betaBadge_ud2h5_65 div css-1d22cyw" href="LINK GOES HERE"><span style="color: rgb(255, 0, 0);">BUTTON 6</span></a></p>

Basic gold- grey hover ⤵️

  <p style="text-align: center;"><a target="_blank" rel="noopener noreferrer" class="Btn pp-uc-follow-button glow-on-hover pp-top-bar-create-char css-1yhasuw" href="LINK GOES HERE"><span style="color: rgb(255, 0, 0);">BUTTON 6</span></a></p>

Dark Purple- Grey hover

  <p style="text-align: center;"><a target="_blank" rel="noopener noreferrer" class="_characterInfoShinyBox_1yi4w_265 Btn pp-uc-follow-button  glow-on-hover pp-top-bar-create-char css-1yhasuw" href="LINK GOES HERE"><span style="color: rgb(255, 0, 0);">BUTTON 6</span></a></p>

Red- grey hover ⤵️

  <p style="text-align: center;"><a target="_blank" rel="noopener noreferrer" class=""Btn pp-uc-follow-button _moderationHeader_1s17f_360  glow-on-hover pp-top-bar-create-char css-1yhasuw" href="LINK GOES HERE"><span style="color: rgb(255, 0, 0);">BUTTON 6</span></a></p>

Grey- grey hover ⤵️

  <p style="text-align: center;"><a target="_blank" rel="noopener noreferrer" class="Btn pp-uc-follow-button _scheduledReleaseSection_1s17f_863  glow-on-hover pp-top-bar-create-char css-1yhasuw" href="LINK GOES HERE"><span style="color: rgb(255, 0, 0);">BUTTON 6</span></a></p>

Dark Blue- grey hover ⤵️

  <p style="text-align: center;"><a target="_blank" rel="noopener noreferrer" class="Btn pp-uc-follow-button _count_138g0_7  glow-on-hover pp-top-bar-create-char css-1yhasuw" href="LINK GOES HERE"><span style="color: rgb(255, 0, 0);">BUTTON 6</span></a></p>

Black/ glow- grey hover ⤵️

  <p style="text-align: center;"><a target="_blank" rel="noopener noreferrer" class="Btn pp-uc-follow-button _archiveButton_di476_217  glow-on-hover pp-top-bar-create-char css-1yhasuw" href="LINK GOES HERE"><span style="color: rgb(255, 0, 0);">BUTTON 6</span></a></p>

Green- grey hover ⤵️

  <p style="text-align: center;"><a target="_blank" rel="noopener noreferrer" class="Btn pp-uc-follow-button div _betaBadge_ud2h5_65  glow-on-hover pp-top-bar-create-char css-1yhasuw" href="LINK GOES HERE"><span style="color: rgb(255, 0, 0);">BUTTON 6</span></a></p>

Black -Purple hover/glow

  <p style="text-align: center;"><a target="_blank" rel="noopener noreferrer" class="_archiveButton_di476_217" href="LINK GOES HERE"><span style="color: rgb(255, 0, 0);">BUTTON 6</span></a></p>

created by Rocket499 2026© on janitorai.com

Permanent link to this version