CoodeVerse YouTube Style Subscribe Button is a free HTML CSS UI component. Features: authentic YouTube red background-color:#ff0000, pill shape border-radius:50px, base box-shadow:0 8px 25px rgba(255,0,0,0.5), CSS transition:all 0.3s ease, hover state background-color:#cc0000 (darker red), hover transform:translateY(-4px) lift, hover box-shadow:0 12px 30px rgba(255,0,0,0.6) stronger glow, active state transform:translateY(0) press reset, Font Awesome bell icon via ::after pseudo-element (content:'\f0f3', font-family:'Font Awesome 6 Free', font-weight:900, margin-left:12px, font-size:22px, vertical-align:-2px). Zero JavaScript. Font Awesome loaded from cdnjs.cloudflare.com. Free under CC BY 4.0.
Free
YouTube Style Subscribe Button updated for 2026 — red hover lift, glow, bell icon, pure CSS →
View & Download →
100% Free — No paywall
Live Preview — See it in action
HTML + CSS Only — No JavaScript
Drop-in Ready — Any website
✓ Free DownloadYouTube Red #ff0000Hover Lift EffectRed Glow Shadow🔔 Bell Icon CSS::after Pseudo-elementActive Press EffectNo JavaScript
What is the CoodeVerse YouTube Style Subscribe Button?
The CoodeVerse YouTube Style Subscribe Button is a free, downloadable HTML + CSS button component that replicates YouTube's iconic red subscribe button. It uses authentic YouTube red (#ff0000), a pill shape (border-radius:50px), a hover lift (translateY(-4px)) with darker red (#cc0000) and stronger red glow, an active press reset, and a FA bell icon injected automatically via CSS ::after — with zero JavaScript required.
Tech Stack
HTML + CSS only
Price
$0 — Free Forever
JavaScript
None — CSS only
Brand Color
#ff0000 YouTube Red
Bell Unicode
\f0f3 (FA bell)
Sign-up
None required
Welcome! CoodeVerse YouTube Style Subscribe Button is 100% free — authentic red, hover lift, bell icon, pure CSS, no sign-up.
Free YouTube Style Subscribe Button — Authentic Red CSS, Hover Lift Animation, Red Glow Box-Shadow, Active Press Effect & Font Awesome Bell Icon via CSS ::after Pseudo-element
Free downloadable YouTube-style red subscribe button. HTML + CSS only, zero JavaScript. background-color:#ff0000, border-radius:50px pill, transition:all 0.3s ease, hover: background-color:#cc0000, transform:translateY(-4px), box-shadow:0 12px 30px rgba(255,0,0,0.6). Active: transform:translateY(0). Bell icon: ::after content:'\f0f3', font-family:'Font Awesome 6 Free', font-weight:900. Free to download under CC BY 4.0.
YouTube Style Subscribe Button
Updated March 2026
Windows Tip: After downloading the ZIP, right-click the folder → Properties → check "Unblock" (if visible) → Apply → OK. This removes the "file came from another computer" warning so everything works perfectly!
background-color:#ff0000 is YouTube's exact brand red (RGB 255,0,0). On hover it darkens to #cc0000 (RGB 204,0,0) — the standard darker shade. Base glow: box-shadow:0 8px 25px rgba(255,0,0,0.5). Hover glow: 0 12px 30px rgba(255,0,0,0.6).
Pill Shape via border-radius
border-radius:50px — any value larger than half the button height creates fully rounded pill ends. Combined with padding:16px 40px, this matches YouTube's classic capsule button shape. Works on any text length.
CSS Hover Lift Animation
transform:translateY(-4px) moves the button 4px up on hover, simulating lifting off the page. transition:all 0.3s ease smooths the motion. Pairing with increased box-shadow strengthens the depth illusion.
CSS Active Press Reset
.subscribe-btn:active { transform:translateY(0) } snaps the button back to its normal position when clicked, simulating a physical button press. No JavaScript needed — pure CSS :active pseudo-class handles it.
::after Bell Icon Injection
::after { content:'\f0f3'; font-family:'Font Awesome 6 Free'; font-weight:900; } — the browser renders the FA bell glyph after the button text. margin-left:12px adds spacing. vertical-align:-2px aligns it optically with the text. Zero HTML changes needed.
CSS transition: all
transition:all 0.3s ease applies to every CSS property — background-color, transform, and box-shadow — all animate smoothly in one declaration. ease means it starts slowly, accelerates, then slows to a stop. Use specific properties instead of all for production performance.
How to Build a YouTube Style Subscribe Button with CSS
1
Write the minimal HTML
One element: <button class="subscribe-btn">Subscribe</button>. Load Font Awesome in <head>: link rel="stylesheet" href="cdnjs.cloudflare.com/.../font-awesome/6.6.0/css/all.min.css". The bell icon comes from CSS — no extra HTML needed.
2
Style the base button
Set background-color:#ff0000, color:white, border:none, border-radius:50px, padding:16px 40px, font-size:20px, font-weight:bold, cursor:pointer, transition:all 0.3s ease, and box-shadow:0 8px 25px rgba(255,0,0,0.5).
3
Add hover states
On :hover: background-color:#cc0000 (darker), transform:translateY(-4px) (lift), box-shadow:0 12px 30px rgba(255,0,0,0.6) (stronger glow). The transition on the base state handles all animations.
4
Add the active press effect
On :active: transform:translateY(0) snaps the lift back to baseline when clicked. This alone is enough — no box-shadow change needed for the press. Zero JavaScript.
5
Inject the bell icon with ::after
Add .subscribe-btn::after { content:'\f0f3'; font-family:'Font Awesome 6 Free'; font-weight:900; margin-left:12px; font-size:22px; vertical-align:-2px; }. The bell appears after "Subscribe" automatically via CSS — no HTML changes required.
Use the ::after (or ::before) pseudo-element with content set to the Font Awesome unicode. Example: .subscribe-btn::after { content:'\f0f3'; font-family:'Font Awesome 6 Free'; font-weight:900; }. Font weight 900 selects the solid icon variant. Font Awesome CSS must be loaded in the head. No HTML changes, no JavaScript — the icon is injected entirely by CSS.
YouTube's primary brand red is #ff0000 (pure red, RGB 255,0,0, HSL 0° 100% 50%). The hover/darker shade is approximately #cc0000 (RGB 204,0,0). For the red glow box-shadow, use rgba(255,0,0,0.5) at rest and rgba(255,0,0,0.6) on hover. These exact values match the YouTube visual style used in the CoodeVerse YouTube Subscribe Button.
Set transition:all 0.3s ease on the default button state. On :hover add transform:translateY(-4px) to move it upward. Enhance depth with a larger box-shadow on hover. Add :active { transform:translateY(0) } to reset on press. All done in pure CSS — no JavaScript event listeners required.
Set border-radius to a value larger than half the button's height, such as border-radius:50px or border-radius:100px. For a 50px tall button, any radius above 25px creates pill ends. border-radius:9999px is a common "always pill" trick. The CoodeVerse YouTube Subscribe Button uses border-radius:50px for the YouTube pill shape.
A CSS-only toggle is possible using a hidden checkbox and label. Wrap the button in a label linked to a checkbox input. Use the :checked pseudo-class to change styles: input:checked + .subscribe-btn { background-color:#606060; } and change ::after content to '\f1f6' (fa-bell-slash). Clicking the label toggles the checkbox and the subscribed state — no JavaScript at all.
Frequently Asked Questions
Is this YouTube subscribe button free?
Yes. 100% free — no account, payment, or sign-up. Download the full ZIP with HTML and CSS under CC BY 4.0. Use freely in personal, commercial, or open-source projects.
Does this button require JavaScript?
No. The button is pure HTML and CSS. The bell icon is injected via CSS ::after, the hover and press animations are CSS transitions and transforms. No <script> tag, no event listeners, no dependencies beyond Font Awesome for the icon.
How do I add a subscribed toggle state with JavaScript?
In JS: let sub=false; btn.addEventListener('click',()=>{sub=!sub; btn.textContent=sub?'Subscribed':'Subscribe'; btn.style.backgroundColor=sub?'#606060':'#ff0000';}). For the bell, toggle a CSS class that overrides ::after content to the slash variant ('\f1f6' for fa-bell-slash).
Why is font-weight:900 needed for Font Awesome icons?
Font Awesome 6 uses different font-weight values to select icon style variants. font-weight:900 = fas (solid), font-weight:400 = far (regular), font-weight:300 = fal (light). For the ::after content to render correctly, the weight must match the icon variant available in the loaded stylesheet.
How do I change the button text from "Subscribe" to another language?
Just change the button HTML text: <button class="subscribe-btn">Suscribirse</button>. The ::after bell icon stays in place regardless of text content. Adjust padding-right if the pill becomes too short for longer text strings.
Can I use this on a real YouTube channel website?
Yes — as a visual element. For actual YouTube subscribe functionality, use YouTube's official subscribe widget or the YouTube Data API. The CoodeVerse button is a standalone CSS component — perfect as a visual CTA that links to your channel URL or triggers a custom subscription flow.
What is vertical-align:-2px used for on the icon?
vertical-align:-2px nudges the bell icon 2px downward relative to the baseline, optically aligning the icon with the text cap height. Without it, the 22px icon appears slightly too high compared to the 20px text. Adjust the value for different font-size combinations.
How do I remove the bell icon?
Simply delete the .subscribe-btn::after rule block from the CSS. No HTML changes needed — the icon exists only in CSS. To keep the ::after block but hide it, set display:none on the pseudo-element: .subscribe-btn::after { display:none; }.