Hover effect not working correctly in google chrome - css

Question

I watched a video on Youtube about the hover effect, and I'm trying to do it by myself, but the problem is it's not working on google chrome: :before and :after background overflow when the transition executes.
In Firefox it works without any problem.
I thought it might be happening because I didn't use any prefixes, so I includes prefixes in code but the problem didn't go away
to be clear my problem
background of :before and :after show out of button border
body {
display: flex;
margin: 0;
padding: 0;
align-items: center;
justify-content: center;
height: 100vh;
}
a {
overflow: hidden;
display: block;
position: relative;
text-decoration: none;
color: #000;
border: 4px solid #000;
padding: 10px 30px;
font-size: 20px;
letter-spacing: 12px;
border-radius: 30px;
-webkit-border-radius: 30px;
text-transform: uppercase;
transition:color 1s ease-in-out;
transition-delay: 1s;
}
a:before {
content:'';
position: absolute;
top: 50%;
left: 60px;
height: 8px;
width: 8px;
background-color: #F00;
transform:scale(0.8);
-webkit-transform:scale(0.8);
border-radius:100%;
-webkit-border-radius:100%;
z-index: -1;
opacity:0;
transition-property:transform,left,opacity;
transition-delay: 0s,1s,1.5s;
transition-duration: 1s,1s,0s;
}
a:hover:before {
border-radius:100%;
-webkit-border-radius:100%;
opacity:1;
left: 10px;
transform:scale(33);
-webkit-transform:scale(33);
transition-property:opacity,left,transform;
transitiion-delay:0s,0.5s,2s;
transition-duration: 0s,0.5s,1s;
}
a:after {
content:'';
position: absolute;
top: 50%;
right: 60px;
height: 8px;
width: 8px;
background-color: #F00;
transform:scale(0.8);
-webkit-transform:scale(0.8);
border-radius:100%;
-webkit-border-radius:100%;
z-index: -1;
opacity:0;
transition-property:transform,right,opacity;
transition-delay: 0s,1s,1.5s;
transition-duration: 1.5s,1s,0s;
}
a:hover:after {
opacity:1;
right: 10px;
transform:scale(33);
-webkit-transform:scale(33);
transition-property:opacity,right,transform;
transitiion-delay:0s,0.5s,2s;
transition-duration: 0s,0.5s,1s;
}
a:hover{
color:#FFF;
}
Button

Answer 1

You have written transitiion instead of transition several times.
Your transition seems to be working (even if you do not say what you would like to do), it's just a little long.
You can play with the delay to change the duration of the animation, here is your code with shortened delays:
body {
display: flex;
margin: 0;
padding: 0;
align-items: center;
justify-content: center;
height: 100vh;
}
a {
overflow: hidden;
display: block;
position: relative;
text-decoration: none;
color: #000;
border: 4px solid #000;
padding: 10px 30px;
font-size: 20px;
letter-spacing: 12px;
border-radius: 30px;
-webkit-border-radius: 30px;
text-transform: uppercase;
transition:color .2s ease-in-out;
transition-delay: .1s;
}
a:before {
content:'';
position: absolute;
top: 50%;
left: 60px;
height: 8px;
width: 8px;
background-color: #F00;
transform:scale(0.8);
-webkit-transform:scale(0.8);
border-radius:100%;
-webkit-border-radius:100%;
z-index: -1;
opacity:0;
transition-property:transform,left,opacity;
transition-delay: 0s,.5s,.5s;
transition-duration: .5s,.5s,0s;
}
a:hover:before {
border-radius:100%;
-webkit-border-radius:100%;
opacity:1;
left: 10px;
transform:scale(33);
-webkit-transform:scale(33);
transition-property:opacity,left,transform;
transition-delay:0s,0.2s,.2s;
transition-duration: 0s,0.2s,.2s;
}
a:after {
content:'';
position: absolute;
top: 50%;
right: 60px;
height: 8px;
width: 8px;
background-color: #F00;
transform:scale(0.8);
-webkit-transform:scale(0.8);
border-radius:100%;
-webkit-border-radius:100%;
z-index: -1;
opacity:0;
transition-property:transform,right,opacity;
transition-delay: 0s,.2s,.2s;
transition-duration: .2s,.2s,0s;
}
a:hover:after {
opacity:1;
right: 10px;
transform:scale(33);
-webkit-transform:scale(33);
transition-property:opacity,right,transform;
transition-delay:0s,0.2s,.2s;
transition-duration: 0s,0.2s,.2s;
}
a:hover{
color:#FFF;
}
Button

Answer 2

I'm not sure to understand your problem but if it is the absence of transition it could be because you have wrote transitiion-delay instead of transition-delay.
I have tried your code with Chrome and Firefox and didn't noticed a difference.
You can learn more about the need (or absence of need) for prefixes on this website : https://caniuse.com/#search=transform