I'm having issues with my hover effects not showing:
<input type="button" class="button" value="Click">
However, this code works fine:
<button class="button">Click</button>
The CSS codes are functioning correctly when adding a button element, but they do not work when using an input element.
@import url("https://fonts.googleapis.com/css?family=Raleway:300");
* {
margin: 0;
padding: 0;
}
body {
display: flex;
height: 100vh;
background: black;
align-items: center;
justify-content: center;
}
.button {
position: relative;
height: 60px;
width: 200px;
border: none;
outline: none;
color: white;
background: #111;
cursor: pointer;
border-radius: 5px;
font-size: 18px;
font-family: 'Raleway', sans-serif;
}
.button:before {
position: absolute;
content: '';
top: -2px;
left: -2px;
height: calc(100% + 4px);
width: calc(100% + 4px);
border-radius: 5px;
z-index: -1;
opacity: 0;
filter: blur(5px);
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
background-size: 400%;
transition: opacity .3s ease-in-out;
animation: animate 20s linear infinite;
}
.button:hover:before {
opacity: 1;
}
.button:hover:active {
background: none;
}
.button:hover:active:before {
filter: blur(2px);
}
@keyframes animate {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Glowing Button on Hover</title>
</head>
<body>
<button class="button">Hover Me</button>
<input type="button" class="button" value="Click">
</body>
</html>