How do you fix animation not triggering on hover? - html

Question

I have a hover animation for a button but it doesn't seem to trigger.
Button:
<button class="submit-button">Send</button>
The css:
.submit-button {
background: transparent;
border: 3px solid #edc27b;
cursor: pointer;
float: left;
letter-spacing: 2px;
outline: none;
overflow: hidden;
padding: 25px 80px;
position: relative;
color: #edc27b;
font-family: "baron-neue-regular", "Helvetica", "Arial" !important;
text-transform: lowercase;
}
.submit-button::after {
content: '';
height: 100%;
left: 50%;
opacity: 0;
position: absolute;
top: 50%;
z-index: -1;
width: 100%;
background: #101010;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-o-transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.submit-button:hover::after{
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
opacity: 1;
}
What it's supposed to do is trigger another recktangle (the ::after pseudo class) to transition in from the middle across the button. This one is rotated 45 degrees so that the corners appear to be cut. I can't figure out what the problem might be.

Answer 1

Alright, thanks to Temani Afif I figured out that I never changed the movement, only the opacity
Before:
.submit-button:hover::after{
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
opacity: 1;
}
After:
.submit-button:hover::after{
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-o-transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform: translateX(-50%) translateY(-50%) rotate(45deg);
opacity: 1;
}