Untitled

dabblet.css

.shadow-ai {
	justify-content: center;
	align-items: center;
	position: relative;
	display: inline-block;
	text-align: center;
	color: #fff;
	padding: 8px 16px 8px 16px;
	border-radius: 100px;
	font-size: 16px;
	background: #080a47;
}
.shadow-ai:before,
.shadow-ai:after {
	content: "";
	position: absolute;
	top: -2px;
	left: -2px;
	border-radius: 100px;
	background: linear-gradient(
		45deg,
		#de238e,
		#3a30ba,
		#ffcc85,
		#de238e,
		#3a30ba,
		#ffcc85
	);
	background-size: 400%;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	z-index: -1;
	animation: animate 20s linear infinite;
}

.shadow-ai:after {
	filter: blur(15px);
}
.shadow-ai a {
		color: #fff;
}

@keyframes animate {
	0% {
		background-position: 0 0;
	}
	50% {
		background-position: 300% 0;
	}
	100% {
		background-position: 0 0;
	}
}

dabblet.html

<a class="shadow-ai" href="https://dorik.com/ai-website-builder">✨ Dorik AI Website Builder is Coming Soon - <strong>Join the Waitlist</strong></a>

dabblet.js

// Function to clear the active style from both buttons
function clearActiveStyle() {
    document.getElementById('monthly-btn').style.backgroundColor = '';
    document.getElementById('monthly-btn').style.color = '';
    document.getElementById('yearly-btn').style.backgroundColor = '';
    document.getElementById('yearly-btn').style.color = '';
}

// Set initial state
window.onload = function() {
    document.getElementById('monthly-btn').style.backgroundColor = '#333';
    document.getElementById('monthly-btn').style.color = 'white';
    document.getElementById('monthly-pricing').style.display = 'block';
};

document.getElementById('monthly-btn').addEventListener('click', function() {
    clearActiveStyle();
    this.style.backgroundColor = '#333';
    this.style.color = 'white';
    document.getElementById('monthly-pricing').style.display = 'block';
    document.getElementById('yearly-pricing').style.display = 'none';
});

document.getElementById('yearly-btn').addEventListener('click', function() {
    clearActiveStyle();
    this.style.backgroundColor = '#333';
    this.style.color = 'white';
    document.getElementById('yearly-pricing').style.display = 'block';
    document.getElementById('monthly-pricing').style.display = 'none';
});

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}