

		<html>

		<div style="width: 800px; height: 400px; background-color: black; display: flex; flex-direction: column;">
			<button class="buttonnn truergb">
			<p>Hover over me for a quick color transition.</p>
			</button>
		</div>

		
	</html>
	
	
	<style>
	
	/*These variables are used for TrueRGB*/
	@property --trgA{
	  syntax: '<color>';
	  inherits: false;
	  initial-value: black;
	}
	@property --trgB{
	  syntax: '<color>';
	  inherits: false;
	  initial-value: black;
	}
	@property --trggradientAngle{
		syntax: '<angle>';
		inherits: false;
		initial-value: 0deg;
	}
	
	/* Generic button code.*/
	.buttonnn{
		display: block;
		margin: 30px auto auto auto;
		height: 100px; 
		width: 300px;
		background-color: black;
		color: white;
		border-width: 2px;
		border-style: solid;
		p{
			margin:auto;
		}
	}
	/*Code unique to TrueRGB*/
	
	.truergb{
		--trgA: black; /* Button is initially black. */
		--trgB: black; 
		--trggradientAngle: 0deg;
		transition:--colA 0.5s, --colB 0.1s, --gradientAngle 0.1s;
		border-image: linear-gradient(var(--trggradientAngle),var(--trgA),var(--trgB)) 1;
	}
	
	.truergb:hover{
		animation-name: animatergb;
		animation-duration: 7s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		p{text-shadow: 0px 0px 5px white;} /* This makes the text glow a little when it's hovered over. Remove it if you don't like the glow. */
	}
	
	@keyframes animatergb { /* Slowly cycles through RGB colors, while slowly rotating the gradient as well. */
		0%{
		--trgA: #FF0000;
		--trgB: #FFFF00;
		--trggradientAngle: 0deg;
		}
		17%{
		--trgA: #FFFF00;
		--trgB: #00FF00;
		--trggradientAngle: 30deg;
		}
		34%{
		--trgA: #00FF00;
		--trgB: #00FFFF;
		--trggradientAngle: 60deg;
		}
		50%{
		--trgA: #00FFFF;
		--trgB: #0000FF;
		--trggradientAngle: 90deg;
		}
		67%{
		--trgA: #0000FF;
		--trgB: #FF00FF;
		--trggradientAngle: 120deg;
		}
		84%{
		--trgA: #FF00FF;
		--trgB: #FF0000;
		--trggradientAngle: 150deg;
		}
		100%{
		--trgA: #FF0000;
		--trgB: #FFFF00;
		--trggradientAngle: 180deg;
		}
	}
	
	</style>