I'm having trouble getting my CSS styles to apply correctly to the input field. Can anyone help me understand why this is happening?
If you'd like to take a look at the code, here are the links to the .html file and the .CSS styles.
The goal is to create a smooth transition effect with the CSS styles, but for some reason, they're not working as expected.
<input type="submit" value="Submit" />input[type="submit"] {
background: #fff;
color: #4741d7;
border: 2px solid #4741d7;
padding: 16px 20px;
border-radius: 3px;
position: relative;
z-index: 1;
overflow: hidden;
display: inline-block;
font-size: large;
letter-spacing: 12px;
}
input[type="submit"]:hover {
color: #fff;
}
input[type="submit"]::after {
content: "";
background-color: #4741d7;
position: absolute;
z-index: -1;
padding: 16px 20px;
display: block;
left: 0;
right: 0;
top: 0;
bottom: 0;
transform: scale(0, 0) rotate(-180deg);
transition: all 0.3s ease;
}
input[type="submit"]:hover::after {
transition: all 0.3s ease-out;
transform: scale(1, 1) rotate(0deg);
}