@import url('https://fonts.googleapis.com/css?family=Rammetto+One');
 body, html {
	 margin: 0;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 height: 100vh;
	 background: #000000;
}
 * {
	 font-family: "Arial";
	 text-decoration: none;
	 color: white;
}
 .container {
	 position: relative;
	 width: 300px;
	 height: 150px;
	 perspective: 1000px;
}
 .button {
	 display: block;
	 width: inherit;
	 height: inherit;
	 transform-style: preserve-3d;
}
 .button:hover .button_side:after {
	 opacity: 1;
}
 .button_side {
	 position: absolute;
	 width: inherit;
	 height: inherit;
	 border: 1px solid white;
	 line-height: 150px;
	 text-align: center;
	 font-size: 32px;
	 font-weight: bold;
	 display: block;
	 box-sizing: border-box;
	 transition: 0.3s ease;
	 opacity: 1;
}
 .button_side:after {
	 width: 100%;
	 height: 100%;
	 content: '';
	 background: linear-gradient(to right,#24cf65,#514a9d);
	 top: 0;
	 left: 0;
	 position: absolute;
	 z-index: -1;
	 animation: 15s hue infinite;
	 opacity: 0;
	 transition: opacity 0.3s ease;
}
 .button_front {
	 transform: translateZ(75px);
}
 .button_back {
	 transform: rotateY(-180deg) translateZ(75px);
}
 .button_right {
	 width: 150px;
	 transform: rotateY(90deg) translateZ(225px);
}
 .button_left {
	 width: 150px;
	 transform: rotateY(-90deg) translateZ(75px);
}
 .button_top {
	 transform: rotateX(90deg) translateZ(75px);
}
 .button_bottom {
	 transform: rotateX(-90deg) translateZ(75px);
}
 .button_glow {
	 position: absolute;
	 content: '';
	 height: 100%;
	 width: 100%;
	 background: linear-gradient(to right,#24c6dc,#514a9d);
	 animation: 15s hue-blur infinite;
	 opacity: 1;
}
 @keyframes hue-blur {
	 0% {
		 filter: blur(30px) hue-rotate(0deg);
	}
	 50% {
		 filter: blur(80px) hue-rotate(360deg);
	}
	 100% {
		 filter: blur(30px) hue-rotate(0deg);
	}
}
 @keyframes hue {
	 0% {
		 filter: hue-rotate(0deg) blur(30px);
	}
	 50% {
		 filter: hue-rotate(360deg) blur(30px);
	}
	 100% {
		 filter: hue-rotate(0deg) blur(30px);
	}
}