Custom CSS for Discord to remove the GIF picker and Nitro Gift buttons from the message bar

RemoveButtons.theme.css

/**
 * @name Remove Buttons
 * @version 1.1.1
 * @author cheesits456
 * @authorId 306018440639152128
 * @description Remove the nitro gift, GIF picker, and sticker picker buttons from the message box. Also remove the sticker suggestion popup
 * @source https://gist.github.com/cheesits456/41d659f932b5a574b5dfb9b391a4506e
 * @invite 7QH4YeD
 * @donate https://donate.haileybot.com
 * @website https://cheesits456.dev
*/

/* Hide Nitro gift button */
button[aria-label="Send a gift"] {
    display: none;
}
/* Hide GIF picker button */
button[aria-label="Open GIF picker"] {
    display: none;
}
/* Hide sticker picker button */
button[aria-label="Open sticker picker"] {
    display: none;
}
/* Hide annoying sticker popup window that appears when you type */
.channelTextArea-1FufC0 > .container-1ZA19X {
    display: none;
}

Any way to hide "Events" without hiding the Channels & Roles and whatnot in other servers? Driving me absolutely insane that it's pinned in every single server I own, I have never used it even once in my life. :/

Contribution: When you have a chain of quote replies and it yells at you to make a thread:

/* Stop nagging about threads / [class="threadSuggestionBar_"] { display: none; }

try this one:

div[class^="containerDefault_"]:has(div[data-list-item-id^="channels___upcoming-events"]){
    display:none;
}

anyone has one for the promoted games button?

anyone has one for the promoted games button?

Promoted Games are nested under "Apps"; see above.

I'm not best at making stuff, I kinda disliked that Ido have Vencord and too many buttons there in chat making textbox smaller and sometimes annoying to type especially when I switch to laptop where screen is smaller

For anyone if you want to use, modify or anything feel free to take:

[class^="scrollableContainer__"] {
    position: relative;
}

[class^="buttons__"] button[aria-label="Send a gift"],
[class^="buttons__"] button[aria-label="Open Translate Modal"],
[class^="buttons__"] button[aria-label="Disable Silent Typing"],
[class^="buttons__"] button[aria-label="Enable Silent Typing"],
[class^="buttons__"] button[aria-label="Insert Timestamp"],
[class^="buttons__"] button[aria-label="Encrypt Message"],
[class^="buttons__"] button[aria-label="Preview Message"],
[class^="buttons__"] button[aria-label="Open GIF picker"],
[class^="buttons__"] button[aria-label="Open sticker picker"],
[class^="buttons__"] button[aria-label="Select emoji"],
[class^="buttons__"] button[aria-label="Apps"] {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease, transform 1s ease;
}

[class^="buttons__"]:hover button[aria-label="Send a gift"],
[class^="buttons__"]:hover button[aria-label="Open Translate Modal"],
[class^="buttons__"]:hover button[aria-label="Disable Silent Typing"],
[class^="buttons__"]:hover button[aria-label="Enable Silent Typing"],
[class^="buttons__"]:hover button[aria-label="Insert Timestamp"],
[class^="buttons__"]:hover button[aria-label="Encrypt Message"],
[class^="buttons__"]:hover button[aria-label="Preview Message"],
[class^="buttons__"]:hover button[aria-label="Open GIF picker"],
[class^="buttons__"]:hover button[aria-label="Open sticker picker"],
[class^="buttons__"]:hover button[aria-label="Select emoji"],
[class^="buttons__"]:hover button[aria-label="Apps"] {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    opacity: 1;
    pointer-events: auto;
}

Adding new buttons is simple, I have no idea if discord changes numbers at the end that's why is a class. Feel free to use it in QuickCSS Editor or if you find better way to do it... tell me.

It works simply, if you hover mouse where usually discord buttons are, it reveals your buttons. Whenever textchat becomes scrollable it keeps buttons on top right.

How it looks:

When you hover on right top corner:

Theme used is:
https://refact0r.github.io/midnight-discord/build/midnight.css

or look at:
https://refact0r.github.io/midnight-discord/

You can remove the gift nitro button with this:

div[aria-label="Send a gift"] {
  display: none !important;
}

Put this in QuickCSS in Vencord settings. That button is actually a div.

If it doesn't work for you then:

1. Go to web discord.
2. Inspect the gift button.
3. See what label it is.
4. Modify the snippet accordingly.

ive made a discord theme with the help of code from this thread

customise to your needs by commenting out or removing code ;P

It's only changed to a div recently. I like using commas to group this stuff up just in case they revert it.

/* Hide Nitro gift button */
button[aria-label="Send a gift"], div[aria-label="Send a gift"] {
display: none;
}

Hi folks,

Is there a tutorial about how to get this CSS into Discord? I don't really know how to apply these suggestions.

Thanks,

It's only changed to a div recently. I like using commas to group this stuff up just in case they revert it.

/* Hide Nitro gift button */ button[aria-label="Send a gift"], div[aria-label="Send a gift"] { display: none; }

thanks! theme updated as such :)

Hi folks,

Is there a tutorial about how to get this CSS into Discord? I don't really know how to apply these suggestions.

Thanks,

what operating system do you use? regardless, i think vencord's install page is very useful! if you still cant figure out how to install vencord, there are several videos on how to do such if you need!

from there, once discord is restarted and such, go to user settings > vencord (right under "user settings") > themes >

and then you have 1 of 2 options:

1. paste the css you choose into "Edit QuickCSS"
2. "open theme folder" and download a css theme, drag it in, click "load missing themes" and simply flip the switch to enable

as said, if you have any more questions the internet has lots of documentation to look into, use any search engine you like to get to it. hope this helps somewhat! :D

I've been using this a while now, and recently notice it's only working on the apps, not the other buttons. Any updates that will work for it?

I've been using this a while now, and recently notice it's only working on the apps, not the other buttons. Any updates that will work for it?

check my reply it has updated css for buttons

Since Discord likes to change it from a button to a div, and to who knows what else in the future, just do this in the QuickCSS

*[aria-label="Send a gift"] {
    display: none;
}

Currently for me with little change, if anyone has better solution that would make it works. Well... this is the best I could think of without touching HTML somehow. It hides buttons and you can easily add one. You can see there is some buttons from some plugins and default discord ones (div buttons atm). It just hide all the buttons except 1 so you still have one little button you can hover mouse over... tho sometimes can get little messy when text starts bouncing.

[class^="scrollableContainer__"] {
    position: relative;
}

[class^="buttons__"] div[aria-label="Send a gift"],
[class^="buttons__"] button[aria-label="Open Translate Modal"],
[class^="buttons__"] button[aria-label="Disable Silent Typing"],
[class^="buttons__"] button[aria-label="Enable Silent Typing"],
[class^="buttons__"] button[aria-label="Insert Timestamp"],
[class^="buttons__"] button[aria-label="Encrypt Message"],
[class^="buttons__"] button[aria-label="Preview Message"],
[class^="buttons__"] div[aria-label="Open GIF picker"],
[class^="buttons__"] div[aria-label="Open sticker picker"],
[class^="buttons__"] div[aria-label="Select emoji"] {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease, transform 1s ease;
}

[class^="buttons__"]:hover div[aria-label="Send a gift"],
[class^="buttons__"]:hover button[aria-label="Open Translate Modal"],
[class^="buttons__"]:hover button[aria-label="Disable Silent Typing"],
[class^="buttons__"]:hover button[aria-label="Enable Silent Typing"],
[class^="buttons__"]:hover button[aria-label="Insert Timestamp"],
[class^="buttons__"]:hover button[aria-label="Encrypt Message"],
[class^="buttons__"]:hover button[aria-label="Preview Message"],
[class^="buttons__"]:hover div[aria-label="Open GIF picker"],
[class^="buttons__"]:hover div[aria-label="Open sticker picker"],
[class^="buttons__"]:hover div[aria-label="Select emoji"] {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    opacity: 1;
    pointer-events: auto;
}

i really wish (as we all do) that discord would just make these things toggleable. alas.. the program has been beyond any accessibility for years. big respect to this threads contributors though ;P

changing to div worked for me, however not hiding the parent div messes with the formatting of the message bar buttons. If the user adds more custom buttons (such as with the SendTimestamps plugin vencord offers), the spacing will be far to the left.
This should fix that:

div:has(> [aria-label="Send a gift"]),
button:has(> [aria-label="Send a gift"]) {
  display: none !important;
}

/* hide GIF picker */
div:has(> [aria-label="Open GIF picker"]),
button:has(> [aria-label="Open GIF picker"]) {
  display: none !important;
}

/* hide sticker picker */
div:has(> [aria-label="Open sticker picker"]),
button:has(> [aria-label="Open sticker picker"]) {
  display: none !important;
}

This covers both div and button. Currently its a div at the time of writing.

Any way to remove the Quests tab above DMs?

Any way to remove the Quests tab above DMs?

here's how I removed it on my end:

/* remove quest button in DMs */
a[href="/quest-home"]{
    display:none;
}

This is my current list of tweaks, removing multiple annoyances. These are just selectors, grab the ones you want, put them in a single rule, and use display: none !important as the rule body (the !important isn't required for most, but doesn't hurt and I think some do need it).

A few of these rely on element order. This makes them language-agnostic (unlike the aria-label method many others use), but it means they will break if Discord changes the order. That happens infrequently enough that I prefer this method.

All the buttons in the message field except the emoji button (and the + button, that's in a different container):

[class*=channelTextArea] [class*=buttons]>div:not(:nth-child(5))

All the buttons and their container, in case you don't even want the emoji button:

[class*=channelTextArea] [class^=buttons]

The "send longer messages with Nitro!" nag box:

[class*=upsell]

(This one might also affect other upselling pop-ups. Good riddance.)

Buttons that show up on messages on hover:

div[class*=buttons][role=group]

Events, shop, Nitro, Quests in DMs list:

a[href="/activities"], a[href="/shop"], a[href="/store"], a[href="/quest-home"]

App launcher (games in voice channels):

[class*=channelAppLauncher]

Edit image with apps hover button:

div[class*=imageContainer] > *[class*=hoverButtonGroup] > *:first-child

Server tags that show up on user names:

[class*="chipletContainer"]

And this one I usually don't bother with, but this removes the custom backgrounds in server member lists, because for some reason Discord doesn't have an option to disable/hide them:

[class*=member] img[class*=img] {
    display: none;
}
[class*=member] [class*=container] {
    background: none !important;
}

I use Vencord, so I want to leave the plugin buttons on. Here's my list of tweaks, thanks to everyone above:

/* Hide unnecessary stuff */
[class^="buttons"] .expression-picker-chat-input-button:not(div[class*="vc-chatbar-button"]), /* Emoji, GIF and sticker buttons */
[class^="buttons"] *[aria-label="Send a gift"], /* Gift Nitro button */
[class^="buttons"] .buttonContainer_e6e74f.app-launcher-entrypoint, /* App launcher button */
[class^="channelAppLauncher"], /* Apps in VCs */
[class*="chipletContainer"], /* Server tags */
[class*="upsell"], /* Nitro upsell box */
[href="/activities"], /* Activities */
[href="/library"], /* Big library button */
[href="/store"], /* Big store button */
[href="/shop"], /* Big shop button */
[href="/quest-home"], /* Big quest/mission button */
.tutorialContainer__650eb+div, /* Discovery button in server list */
div[class^="containerDefault_"]:has(div[data-list-item-id^="channels___upcoming-events"]) /* Events list in server */
{
	display: none;
}

class stuff. thanks!

If anyone's looking for an up to date theme or CSS code for the newest discord UI updates, I made my own. :::}

https://gist.github.com/OrieDargon/220ec8eee4bd6ae1da043ca6f3f0cf9d

/*You may remove or comment out any bit of code you want, if you would prefer to have certain buttons.*/

/*The code below removes the Sticker Picker button in the right of the chat box.*/
[class$="buttons"] div[aria-label="Open sticker picker"] {
    display: none;
}

/*The code below removes the GIF Picker button in the right of the chat box.*/
[class$="buttons"] div[aria-label="Open GIF picker"] {
    display: none;
}

/*The code below removes the Nitro Gift button in the right of the chat box.*/
[class$="buttons"] div[aria-label="Send a gift"] {
    display: none;
}

/*The code below removes the "Apps" button in the right of the chat box.*/
[class$="buttons"] div[aria-label="Apps"] {
    display: none;
}

/*The code below removes the "Apps" button in the bottom left user area, when in a voice call. You can also still access this if needed if you click into the voice call.*/
[class$="actionButtons"] button:nth-child(5) {
    display: none;
}

I updated them and and tweaked some for better UI experience and so they won't break as much

/* Hide unnecessary stuff */

/* Emoji, GIF and sticker button container (remove /* at beginning to delete all. All but main emoji button included below) */
/* [class$="buttons"] .expression-picker-chat-input-button:not(div[class*="vc-chatbar-button"]),

/* Sticker button + removes empty space */
[class^="expression-picker-chat-input-button"]:has([class*="stickerButton"]),

/* GIF button + removes empty space */
[class^="expression-picker-chat-input-button"]:has([aria-label="Open GIF picker"]),

/* Gift button in chat + removes empty space */
[class$="-container"]:has(> [aria-label="Send a gift"]),

/* All Gift buttons like shop, etc (leaves empty space in chat) */
/* [class$="buttons"] [aria-label="Send a gift"],

/* Vencord Stickers+ button */
/* div:has(> button > svg.vc-more-stickers-icon),

/* Server tags */
[class*="chipletContainer"],

/* App launcher button */
[class$="buttons"] .app-launcher-entrypoint,

/* Apps in VC (participants/screenshare screen) + removes empty space */
[class*="buttonContainer"]:has([aria-label*="Start an Activity"]),

/* Apps in VC (user panel) */
button:has(svg[viewBox="0 0 96 96"]),
button:has(path[d*="-6.554999828338623"]),

/* Nitro Home/upsell box */
[class*="upsell"],

/* Activities */
[href="/activities"],

/* Big library button */
[href="/library"],

/* Big store button */
[href="/store"],

/* Big shop button */
[href="/shop"],

/* Big quest/mission button */
[href="/quest-home"],

/* Discovery button in server list */
[class*="tutorialContainer"] + [class*="listItem"],

/* Events list in server */
[class^="containerDefault_"]:has([data-list-item-id^="channels___upcoming-events"]),

/* Events in server */
li:has([aria-label="Events"]),

/* Server Boosts in server */
li:has([aria-label="Server Boosts"])
{
	display: none !important;
    pointer-events: none !important;
}

@MichaelDavidGK the aria-describedby for apps in VC would change daily about a week ago, and be inconsistent naming schemes between devices. I don't trust that code remaining consistent anymore, so I specified the "child" in the actionButtons class to display none, and it worked consistently so far

@MichaelDavidGK

/* Gift button in chat + removes empty space */
[class$="-container"]:has([aria-label="Send a gift"]),

this line seems to break/remove the entire interface for me, could be that it interferes with themes (?).

@Swedishdogs

/* Gift button in chat + removes empty space */
[class$="-container"]:has([aria-label="Send a gift"]),

this line seems to break/remove the entire interface for me, could be that it interferes with themes (?).

Change it to this and it should work:
[class$="-container"]:has(> [aria-label="Send a gift"]),

@MichaelDavidGK the aria-describedby for apps in VC would change daily about a week ago, and be inconsistent naming schemes between devices. I don't trust that code remaining consistent anymore, so I specified the "child" in the actionButtons class to display none, and it worked consistently so far

@OrieDargon I see, for some reason it worked for me so far, but I changed it to:

button:has(svg[viewBox="0 0 96 96"]),
button:has(path[d*="-6.554999828338623"]),

I will see how it goes, rn both of them work separately when restarting discord and on both PTB and Canary.

@ Swedishdogs

/* Gift button in chat + removes empty space */
[class$="-container"]:has([aria-label="Send a gift"]),

this line seems to break/remove the entire interface for me, could be that it interferes with themes (?).

Change it to this and it should work: [class$="-container"]:has(> [aria-label="Send a gift"]),

@coffeeyoda thanks for this, I also changed it in mine 😉

Code is updated in my previous message

Discord have now added a different nitro gift button to the chatbar specifically for DM's, so the previous fixes don't help there.

I'm now using this (in addition to the older ones for the version of this button in servers and such), to remove the new button:

[class*=button][aria-label="Give a Gift"]
{
    display: none;
}

The gift button on the chatbar no longer responds to any of the CSS above, including the most recent from Mar 6 2026. Any ideas? I'm using BetterDiscord, it still works for everything else.
If I use Ctrl+Shift+i to open the dev tools I can use the element picker, click "Edit as HTML" and type in style="display:none" -- but I'm getting tired of doing that since it keeps refreshing itself every so often and the button comes back. I suppose just the one button isn't that big of a deal, but it's the principle. :)
[edit] Found something that works for the Gift button. Mind you, I tried this multiple times, but seeing other examples of class in brackets did the trick for me. Added this to MichaelDavidGK's CSS found above:
[class="container__5287f"],

The gift button on the chatbar no longer responds to any of the CSS above, including the most recent from Mar 6 2026. Any ideas? I'm using BetterDiscord, it still works for everything else.

If I use Ctrl+Shift+i to open the dev tools I can use the element picker, click "Edit as HTML" and type in style="display:none" -- but I'm getting tired of doing that since it keeps refreshing itself every so often and the button comes back. I suppose just the one button isn't that big of a deal, but it's the principle. :)

try:

button[aria-label="Send a gift"], div[aria-label="Send a gift"] {
display: none;
}
button[aria-label="Give a Gift"], div[aria-label="Give a Gift"] {
display: none;
}
button[aria-label="Create DM"], div[aria-label="Create DM"] {
display: none;
}