@property --angle{
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
/*button {
	height: 3.4em;
	width: 7.57em;
	position: absolute;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	box-shadow: 0 1.25em 2.18em rgba(0,0,0,0.3); 
	color: #fff;
	overflow: hidden;
	cursor: pointer;
	border-radius: 50px;
	border: none;
}
button::before {
	content: "";
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: conic-gradient(from var(--angle), #ff4545, #00ff99, #006aff, #ff0095, #ff4545);
	background-size: 125em;
}
button::after {
	content: "";
	position: absolute;
	background: #000;
	height: 95%;
	width: 97%;
	top: 2.5%;
	left: 2.0%;
	border-radius: 50px;
	color: #fff;
	display: grid;
	place-items: center;
}
button:hover:before {
	background-position: -106.25em 0;
	transition: 10s linear;
	animation: 3s spin linear infinite;
}*/

a.btn-transparent-white, a.btn-transparent-gold {
	height: 3.4em;
	width: 7.57em;
	position: relative;
	transition: 2s ease-in-out;
	box-shadow: 0 1.25em 2.18em rgba(0,0,0,0.3); 
	color: #fff;
	overflow: hidden;
	cursor: pointer;
	border-radius: 50px;
	border: none;
}
a#liveMockup.btn-transparent-white, a#currentSite.btn-transparent-gold {
	width: 12em;
}
a.btn-transparent-white::before, a.btn-transparent-gold::before {
	content: "";
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: conic-gradient(from var(--angle), #000, #000, #22c8ff, #000, #000, #000);
	background-size: 16em;
	transition: 2s ease-in-out;
}
a.btn-transparent-gold::before {
	background: conic-gradient(from var(--angle), #000, #000, gold, #000, #000, #000);
}
a.btn-transparent-white::after, a.btn-transparent-gold::after {
	content: "Details";
	position: absolute;
	background: #22c8ff;
	height: 90%;
	width: 94%;
	top: 6%;
	left: 3%;
	border-radius: 50px;
	color: #000;
	display: grid;
	place-items: center;
}
a.btn-transparent-gold::after {;
	background: gold;
	color: #000;
}
a#liveMockup.btn-transparent-white::after {
	content: "Live Mockup";
}
a#currentSite.btn-transparent-gold::after {
	content: "Current Site";
}
a.btn-transparent-white:hover:before, a.btn-transparent-gold:hover:before {
	background-position: -3.4em -3.4em;
	transition: 2s ease-in-out;
	animation: 2s spin linear infinite;
}
@keyframes spin{
  from{
    --angle: 0deg;
  }
  to{
    --angle: 360deg;
  }
}





/*a.btn-transparent-white{
  background: #000;
  text-align: center;
  border-radius: 50px;
  position: relative;
  border: none;
  box-shadow: 0 1.25em 2.18em rgba(0,0,0,0.3);
  color: #fff;
  z-index: 9999999;
}

@property --angle{
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
a.btn-transparent-white::before{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background:#000;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 3px;
  border-radius: 50px;
}
a.btn-transparent-white::after{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: conic-gradient(from var(--angle), #ff4545, #00ff99, #006aff, #ff0095, #ff4545);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 3px;
  border-radius: 50px;
}
a.btn-transparent-white:hover{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: conic-gradient(from var(--angle), #ff4545, #00ff99, #006aff, #ff0095, #ff4545);
  top: 0%;
  left: 0%;
  translate: -50% -50%;
  z-index: -1;
  padding: 3px;
  border-radius: 50px;
  animation: 3s spin linear infinite;
}*/
/*a.btn-transparent-white::before{
  filter: blur(1.5rem);
  opacity: 0.5;
}
@keyframes spin{
  from{
    --angle: 0deg;
  }
  to{
    --angle: 360deg;
  }
}*/