Custom animated subscribe button themes
Verze ze dne
// ==UserScript==
// @name YouTube Subscribe Button Themes
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Custom animated subscribe button themes
// @author NOT_FIND
// @match https://www.youtube.com/*
// @icon https://www.google.com/s2/favicons?domain=youtube.com
// @grant none
// @license MIT
// ==/UserScript==
const themeSelector = document.createElement('div');
themeSelector.innerHTML = `
<div id="theme-popup" style="display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#202020;padding:20px;border-radius:10px;z-index:9999;box-shadow:0 0 20px rgba(0,0,0,0.5);width:400px">
<h2 style="text-align:center;margin:0 0 20px;color:#fff">Subscribe Button Themes</h2>
<div style="display:flex;justify-content:space-between;margin-bottom:20px">
<div class="theme-preview">
<div class="preview-btn futuristic">SUBSCRIBE</div>
<button class="select-btn" onclick="selectTheme('futuristic')">Select</button>
</div>
<div class="theme-preview">
<div class="preview-btn bendy">SUBSCRIBE</div>
<button class="select-btn" onclick="selectTheme('bendy')">Select</button>
</div>
<div class="theme-preview">
<div class="preview-btn particles">SUBSCRIBE</div>
<button class="select-btn" onclick="selectTheme('particles')">Select</button>
</div>
<div class="theme-preview">
<button class="select-btn" onclick="selectTheme('default')">Default</button>
</div>
</div>
</div>
`;
document.body.appendChild(themeSelector);
const styles = document.createElement('style');
styles.textContent = `
.select-btn {
width: 100%;
padding: 5px;
border: none;
border-radius: 4px;
background: #065fd4;
color: white;
cursor: pointer;
}
.custom-subscribe-btn {
width: 120px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 14px;
cursor: pointer;
border: none;
margin: 0 4px;
position: relative;
overflow: hidden;
}
.preview-btn {
width: 100px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
font-size: 12px;
font-weight: bold;
position: relative;
overflow: hidden;
}
/* Futuristic Theme */
.futuristic {
background: #7b2ff7;
color: white;
position: relative;
overflow: hidden;
border-radius: 5px;
text-transform: uppercase;
letter-spacing: 2px;
transition: all 0.3s;
}
.futuristic::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: 0.5s;
}
.futuristic:hover::before {
left: 100%;
}
/* Bendy Theme */
.bendy {
background: #00ff95;
color: black;
border-radius: 8px;
transform-origin: center;
animation: bendAnimation 2s ease-in-out infinite;
}
@keyframes bendAnimation {
0% { transform: rotateX(0deg) scale(1); }
25% { transform: rotateX(15deg) scale(1.05); }
50% { transform: rotateX(0deg) scale(1); }
75% { transform: rotateX(-15deg) scale(0.95); }
100% { transform: rotateX(0deg) scale(1); }
}
/* Particles Theme */
.particles {
background: #2d2d2d;
color: white;
border-radius: 5px;
}
.preview-btn.particles::before,
.preview-btn.particles::after,
.custom-subscribe-btn.particles::before,
.custom-subscribe-btn.particles::after {
content: '❄';
position: absolute;
color: white;
font-size: 10px;
animation: snow 2s linear infinite;
opacity: 0;
z-index: 1;
}
.preview-btn.particles::before,
.custom-subscribe-btn.particles::before {
left: 30%;
animation-delay: 0s;
}
.preview-btn.particles::after,
.custom-subscribe-btn.particles::after {
left: 70%;
animation-delay: 1s;
}
@keyframes snow {
0% {
top: -20%;
opacity: 0;
}
50% {
opacity: 0.8;
}
100% {
top: 120%;
opacity: 0;
}
}
`;
document.head.appendChild(styles);
function replaceSubscribeButton(theme) {
const subscribeButton = document.querySelector('#subscribe-button');
if (subscribeButton) {
const oldButton = subscribeButton.querySelector('button');
if (oldButton) {
if (theme === 'default') {
return;
}
const newButton = document.createElement('div');
newButton.className = `custom-subscribe-btn ${theme}`;
const buttonText = oldButton.textContent.trim().toUpperCase();
const isSubscribed = buttonText === 'SUBSCRIBED' || buttonText === 'UNSUBSCRIBE';
newButton.innerHTML = isSubscribed ? 'SUBSCRIBED' : 'SUBSCRIBE';
newButton.onclick = oldButton.onclick;
oldButton.replaceWith(newButton);
}
}
}
window.selectTheme = function(theme) {
if (theme === 'default') {
localStorage.removeItem('subscribeTheme');
} else {
localStorage.setItem('subscribeTheme', theme);
}
location.reload();
}
window.addEventListener('keydown', (e) => {
if(e.key === ';') {
const popup = document.getElementById('theme-popup');
popup.style.display = popup.style.display === 'none' ? 'block' : 'none';
}
});
const observer = new MutationObserver(() => {
const savedTheme = localStorage.getItem('subscribeTheme');
if(savedTheme) {
replaceSubscribeButton(savedTheme);
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
const savedTheme = localStorage.getItem('subscribeTheme');
if(savedTheme) {
replaceSubscribeButton(savedTheme);
}