Home
Button

Infinity Glow Button With Animated Gradient Border | HTML + CSS Code

SITHU CodeZ
Video Thumbnail
Skip Ad (30)
Description

A vibrant animated button created with pure HTML and CSS. It features rotating gradient effects with smooth transitions, making it perfect for modern web designs that need a stylish and eye-catching call-to-action.

Preview

Below is a button designed with red, green, and blue colors. You can easily customize the code provided to apply any colors you prefer.

Step By Step
Adding the Neon Button in Blogger
Step 1 – Add CSS
● Login to your Blogger Dashboard using your Google account.
● From the left sidebar, click on Theme.
● In the Theme section, click the downward arrow (▾) next to the Customize button and select Edit HTML.
● In the HTML editor, press Ctrl + F (or Cmd + F on Mac) to open the search bar.
● Search ]]></b:skin>
● When you find it, paste this CSS code just above it.
CSS 

/* Codez By codez.sithufilms.lk */
.Infinity-btn {
	--border-angle-1: 0deg;
	--border-angle-2: 90deg;
	--border-angle-3: 180deg;
	color: inherit;
	font-size: calc(0.8rem + 4vmin);
	font-family: inherit;
	border: 0;
	padding:2px;
	display: flex;
	width: max-content;
	border-radius:0.75em;
	background-color:#DB18ED;
	background-image: conic-gradient(
			from var(--border-angle-1) at 10% 15%,
			transparent,
			#0000FF 10%,
			transparent 30%,
			transparent
		),
		conic-gradient(
			from var(--border-angle-2) at 70% 60%,
			transparent,
			#55FF00 10%,
			transparent 60%,
			transparent
		),
		conic-gradient(
			from var(--border-angle-3) at 50% 20%,
			transparent,
			#FF0000 10%,
			transparent 50%,
			transparent
		);
	animation: 
		rotateBackground 3s linear infinite,
		rotateBackground2 8s linear infinite,
		rotateBackground3 13s linear infinite;
}
.Infinity-btn div {
	background:#303030; 
	padding: 1em 1.5em;
	border-radius: calc(0.75em - 2px);
	color:#FFFFFF;
}
@property --border-angle-1 {
	syntax: "<angle>";
	inherits: true;
	initial-value: 0deg;
}
@property --border-angle-2 {
	syntax: "<angle>";
	inherits: true;
	initial-value: 90deg;
}
@property --border-angle-3 {
	syntax: "<angle>";
	inherits: true;
	initial-value: 180deg;
}
@keyframes rotateBackground {
	to { --border-angle-1: 360deg; }
}
@keyframes rotateBackground2 {
	to { --border-angle-2: -270deg; }
}
@keyframes rotateBackground3 {
	to { --border-angle-3: 540deg; }
}
● Click Save to apply the changes to your theme.
Step 2 – Add the Button HTML
● Go back to your Blogger Dashboard and open the Posts/Pages section.
● Create a New Post/Page or edit an existing Post/Page where you want to add the gradient buttons.
● In the post editor, click on the pen icon (✏️) or select HTML View from the top-right corner to switch from Compose mode to HTML mode.
● Copy and paste the provided HTML button code into the desired position inside your post.
CSS 

<button class="Infinity-btn">
	<div>
		A beautiful button
	</div>
</button>
● Update or Publish.
Adding the Neon Button in WordPress
Step 1 – Add CSS
● Login to your WordPress Dashboard using your admin account.
● From the left sidebar, go to Appearance → Customize.
● In the Customizer panel, scroll down and click on Additional CSS.
● Inside the text box that appears, paste this CSS code.
CSS 

/* Codez By codez.sithufilms.lk */
.Infinity-btn {
	--border-angle-1: 0deg;
	--border-angle-2: 90deg;
	--border-angle-3: 180deg;
	color: inherit;
	font-size: calc(0.8rem + 4vmin);
	font-family: inherit;
	border: 0;
	padding:2px;
	display: flex;
	width: max-content;
	border-radius:0.75em;
	background-color:#DB18ED;
	background-image: conic-gradient(
			from var(--border-angle-1) at 10% 15%,
			transparent,
			#0000FF 10%,
			transparent 30%,
			transparent
		),
		conic-gradient(
			from var(--border-angle-2) at 70% 60%,
			transparent,
			#55FF00 10%,
			transparent 60%,
			transparent
		),
		conic-gradient(
			from var(--border-angle-3) at 50% 20%,
			transparent,
			#FF0000 10%,
			transparent 50%,
			transparent
		);
	animation: 
		rotateBackground 3s linear infinite,
		rotateBackground2 8s linear infinite,
		rotateBackground3 13s linear infinite;
}
.Infinity-btn div {
	background:#303030; 
	padding: 1em 1.5em;
	border-radius: calc(0.75em - 2px);
	color:#FFFFFF;
}
@property --border-angle-1 {
	syntax: "<angle>";
	inherits: true;
	initial-value: 0deg;
}
@property --border-angle-2 {
	syntax: "<angle>";
	inherits: true;
	initial-value: 90deg;
}
@property --border-angle-3 {
	syntax: "<angle>";
	inherits: true;
	initial-value: 180deg;
}
@keyframes rotateBackground {
	to { --border-angle-1: 360deg; }
}
@keyframes rotateBackground2 {
	to { --border-angle-2: -270deg; }
}
@keyframes rotateBackground3 {
	to { --border-angle-3: 540deg; }
}
Click Publish (top of the page) to save your changes.
Step 2 – Add the Button HTML in a Post/Page
● Go back to your WordPress Dashboard.
● From the left sidebar, click on Posts/Pages section.
● Create a New Post/Page or edit an existing Post/Page where you want to add the gradient buttons.
● In the Block Editor (Gutenberg), click the + (Add Block) icon and select a Custom HTML block.
● Inside the Custom HTML block, paste this HTML button code.
CSS 

<button class="Infinity-btn">
	<div>
		A beautiful button
	</div>
</button>
● Update or Publish.