<html>

		<div style="width: 800px; height: 400px; background-color: black; display: flex; flex-direction: column;">
			<button class="buttonnn coralshift">
			<p>Hover over me for a quick color transition.</p>
			</button>
		</div>
	
		
	</html>
	
	
	<style>
	
	/* These variables are used for Coralshift.*/
	@property --colA{
	  syntax: '<color>';
	  inherits: false;
	  initial-value: crimson;
	}
	@property --colB{
	  syntax: '<color>';
	  inherits: false;
	  initial-value: coral;
	}
	@property --gradientAngle{
		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 Coralshift*/
	.coralshift{
		--colA: crimson; 
		--colB: coral; 
		--gradientAngle: 0deg;
		transition:--colA 0.5s, --colB 0.1s, --gradientAngle 0.1s; /* How quickly each value transitions*/
		border-image: linear-gradient(var(--gradientAngle),var(--colA),var(--colB)) 1; /* Gradient color and angle configs*/
		p{
			transition:--colA 0.5s, --colB 0.1s, --gradientAngle 0.1s; /* The below applies the gradient to the text. */
			-webkit-background-clip: text; 
			 background-clip: text;
			color: transparent;
			background-image: linear-gradient(var(--gradientAngle),var(--colA),var(--colB));
		}
	}
	
	.coralshift:hover { /* Changes the values when the button is hovered over*/
	  --colA: coral;
	  --colB: gold;
	  --gradientAngle: 90deg;
		p{
			--colA: coral;
			--colB: gold;
			--gradientAngle: 90deg;
		}
	}
	
	</style>