<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Hover Effect</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<link rel="stylesheet" href="https://raw.githubusercontent.com/ilyasBilgihan/Agonz-Typeface/master/fonts/fontface.css">
<div class="buttons">
<button class="red style1">Submit</button>
<button class="orange style2">Submit</button>
<button class="yellow style3">Submit</button>
<button class="green style4">Submit</button>
<button class="blue style5">Submit</button>
<button class="purple style6">Submit</button>
<h1>Hover Effect</h1>
</div>
</body>
</html>
/*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; }