Time to Lightning CSS

body {
	background-color: skyblue;
	overflow: hidden;
}

#result {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 5vh;
	background-image: linear-gradient(to left, gray, skyblue, gray);
	background-size: 200% 100%;
  background-position: 0 0;
 	transition: background-position 0.5s ease;
 	border-radius: 1vh;
 	position: relative;

	width: 80%;
	height: 10vh;
	margin: 2vh auto;
	position: relative;
}

#result::after {
	display: flex;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 1vh;
	z-index: -1;
	background-image: conic-gradient(from var(--angle), gray, blue, gray, blue, gray);
	padding: .6vh;
}

#result:hover::after {
	animation: 3s spin linear infinite;
}

#result:hover { 
	background-position: 100% 0;
}


#inputTimeWrapper {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 67%;
  height: 70%;
  margin: 2vh auto;

  position: relative;
  border-radius: 1vh;
  z-index: 0;

  background-image: linear-gradient(to left, darkgray, powderblue, darkgray);
  background-size: 200% 100%;
  transition: background-position 0.5s ease;
}

#inputTimeWrapper::after {
  content: '';
  position: absolute;
  inset: -0.6vh;
  border-radius: 1.2vh;
  z-index: -1;
  background-image: conic-gradient(from var(--angle), gray, blue, gray, blue, gray);
}

#inputTimeWrapper:hover::after {
  animation: spin 3s linear infinite;
}

#inputTime {
  width: 100%;
  height: 100%;
  font-size: 3vh;
  text-align: center;
  border-radius: 1vh;
  background-image: linear-gradient(to left, darkgray, powderblue, darkgray);
	background-size: 200% 100%;
  background-position: 0 0;
 	transition: background-position 0.5s ease;
 	border-radius: 1vh;
 	position: relative;
}

#inputTime:hover {
	background-position: 100% 0;
}


#calculate {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2.5vh;
	width: 26%;
	height: 80%;
	margin: 2vh auto;
	background-image: linear-gradient(to left, darkgray, powderblue, darkgray);
	background-size: 200% 100%;
  background-position: 0 0;
 	transition: background-position 0.5s ease;
 	border-radius: 1vh;
 	position: relative;
}

#calculate::after {
	display: flex;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 1vh;
	z-index: -1;
	background-image: conic-gradient(from var(--angle), gray, blue, gray, blue, gray);
	padding: .6vh;
}

#calculate:hover::after {
	animation: 3s spin linear infinite;
}

#calculate:hover {
	background-position: 100% 0;
}



@property --angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

@keyframes spin{
	from {
		--angle: 0deg;
	}

	to {
		--angle: 360deg;
	}
}

@keyframes graidentAnimiationButton {
	from {
    	background-position: 0% 0;
 	 }
  	to {
   		background-position: 100% 0;
 	 }
}


#inputs {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 80%;
	height: 10vh;
	margin: 0 auto;
	position: relative;
}

#metricContainer {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 2vh auto;
	height: 8vh;
	position: relative;
}

.metric {
	justify-content: center;
	align-items: center;
	display: flex;
	width: 30%;
	height: 100%;
	margin: 1vh auto;
	background-image: linear-gradient(to left, darkgray, powderblue, darkgray);
	background-size: 200% 100%;
  background-position: 0 0;
 	transition: background-position 0.5s ease;
 	border-radius: 1vh;
}

.metric::after {
	display: flex;
	position: absolute;
	content: '';
	border-radius: 1vh;
	width: 29.5%;
	height: 92%;
	z-index: -1;
	background-image: conic-gradient(from var(--angle), gray, blue, gray, blue, gray);
	padding: .6vh;
}

.metric:hover::after {
	animation: 3s spin linear infinite;
}

.metric:hover {
	background-position: 100% 0;
}