Hover Effect

/*Downloaded from https://www.codeseek.co/ilyasbilgihan/hover-effect-GdKPvX */
/*

 *Before testing this effect, please open this project in a new window so you can get a better result. Just change "pen" to "full" in this project link.

 *The font (Ailerons) is created by Agonz.
Here his web site: www.agonz.com.br
If you use this font for commercial project, contact him. (agonz.oliveira@gmail.com)
Thanks for this font Agonz.

 *Hint: If you click on the buttons (on focus status) then the background will maintain its color. If you want to remove the background-color, then just click different space or different button.

*/


/* General Settings */
button {
	position: relative;
	background: none;
	font-family: Ailerons;
	font-size: 20px;
	color: #ccc;
	border: 1px solid;
	border-radius: 5px;
	width: 240px;
	height: 80px;
	overflow: hidden;
	animation: color-border 1s ease-out forwards;
	transition: .5s;
}

button:focus { 
	outline: none; 
	box-shadow: inset 0px 10px 55px 8px rgba(1,1,23,0.4); 
	text-shadow: 0px 0px 5px rgba(255, 255, 255, .8);
	color: #fff;
}

button:before, button:after {
	content: "";
	position: absolute;
	height: 100%;
	top: 0;
	left: 0;
	transition: .5s;
	opacity: .4;
	filter: blur(30px);
}

button:before {
	width: 60px;
	background-color: rgba(255,255,255, .6);
	transform: translateX(-130px) skewX(-45deg);
}

button:after {
	width: 30px;
	background-color: rgba(255,255,255, .3);
	transform: translateX(-115px) skewX(-45deg);
}	

button:hover {
	color: #fff;
	cursor: pointer;
	text-shadow: 0px 0px 5px rgba(255, 255, 255, .8);
	box-shadow: inset 0px 10px 55px 8px rgba(1,1,23,0.4);
	animation: up-down .5s ease-out;
	transition: .5s;
}

/* Twinkle settings when buttons hover */
button.style1:hover:before,
button.style1:hover:after {
	transform: translateX(320px) skewX(-45deg);
	transition: .5s;
	opacity: .8;
}

button.style2:hover:before, 
button.style2:hover:after {
	transform: translateX(320px) skewX(45deg);
	transition: .5s;
	opacity: .8;
}

button.style3:hover:before,
button.style3:hover:after {
	transform: translateX(320px) skewX(-90deg);
	transition: .5s;
	opacity: .8;
}

button.style4:hover:before,
button.style4:hover:after  {
	transform: translateX(320px) skewX(90deg);
	transition: .5s;
	opacity: .8;
}

button.style5:hover:before,
button.style5:hover:after {
	transform: translateX(320px) skewX(120deg);
	transition: .5s;
	opacity: .8;
}

button.style6:hover:before,
button.style6:hover:after {
	transform: translateX(320px) skewX(-120deg);
	transition: .5s;
	opacity: .8;
}


/* Button color settings (border and background are same color) */
button.red { border-color: #801818; }
button.red:hover, button.red:focus { background: #801818; }

button.orange { border-color: #ce5c0c;}
button.orange:hover, button.orange:focus { background: #ce5c0c; }

button.yellow { border-color: #cebf0c;}
button.yellow:hover, button.yellow:focus { background: #cebf0c; }

button.green { border-color: #188038;}
button.green:hover, button.green:focus  { background: #188038; }

button.blue { border-color: #184b80;}
button.blue:hover, button.blue:focus { background: #184b80; }

button.purple { border-color: #401880;}
button.purple:hover, button.purple:focus { background: #401880; }


/* Up-Down text in button when buttons hover */
@keyframes up-down {
    0% {padding-bottom: 10px;}
    25% {padding-bottom: 0px;}
    50% {padding-top: 10px;}
    100% {padding-top: 0;}
}

/* Softly show when page loaded */
@keyframes color-border {
    0% { color: transparent; border-color: transparent; }

}


/*
	The Codes after this line are unnecessary for the operation of the 
  "Hover Effect". These codes just for the promotion.
*/

/* Reset Code */
body {
	margin: 0;
	padding: 0;
	background: #010804;
}

.buttons {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 500px;
	grid-gap: 20px;
}

.buttons h1 {
	grid-column: 1/3;
	grid-row: 1/2;
	text-align: center;
	color: rgba(255,255,255, .8);
	font-family: Roboto;
	font-weight: 100;
	font-size: 40px;
	text-shadow: 0px 0px 5px currentColor;
	animation: color-border 1s ease-out forwards;
}

/* Colorize h1 text when buttons hover */
button.red:focus ~ h1 { color: #801818; } button.red:hover ~ h1 { color: #801818!important; }
button.orange:focus ~ h1 { color: #ce5c0c; } button.orange:hover ~ h1 { color: #ce5c0c!important; }
button.yellow:focus ~ h1 { color: #cebf0c; } button.yellow:hover ~ h1 { color: #cebf0c!important; }
button.green:focus ~ h1 { color: #188038; } button.green:hover ~ h1 { color: #188038!important; }
button.blue:focus ~ h1 { color: #184b80; } button.blue:hover ~ h1 { color: #184b80!important; }
button.purple:focus ~ h1 { color: #401880; } button.purple:hover ~ h1 { color: #401880!important; }