So I'm trying to add an animation to the label when input[type="submit"]::hover, I can't figure out which is the correct css selector for that, I wanna know if I can do it using CSS only, if not I'll use jquery:
#thiselement {
display: block;
background-color: red;
border: none;
color: white;
height: 3rem;
width: 14rem;
border-radius: 24px;
font-weight: 500;
font-size: 18px;
font-family: Poppins, sans-serif;
align-items: center;
letter-spacing: 1px;
align-self: center;
box-shadow: none;
transition: all 0.7s ease;
}
#animatethis{
position: relative;
width: fit-content;
color: white;
left: 10px;
top: 40px;
font-size: 2rem;
}
#thiselement:hover > #animatethis{
animation: lefttoright 1s infinite;
}
@keyframes lefttoright {
0% {
left: 10px;
}
100% {
left: 30px;
}
}
<label for="submitform" id="animatethis">-</label>
<input type="submit" name="submitform" id="thiselement" value="Send Message"/>