Html/Css flickering when i hover over a button - html

Question

i've been looking for some solutions here but i seem to stupid to change it the way i need to, so i decided to make a post.
Following problem:
button {
font-family: custom-bold;
width: 100%;
font-size: 1.1rem;
outline: none;
padding: 10px;
background-color: rgba(0, 0, 0, 0.322);
border: none;
border-radius: 5px;
color: white;
box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.5);
text-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.5);
}
button:hover {
background-color:rgb(255, 255, 255);
display: inline-block;
transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
overflow: hidden;
transition-property: color;
transition-duration: 0.5s;
color:rgb(0, 0, 0);
}
<button>thatsabutton</button>
when u hover over it, it flickers. When for example i add a margin-top to it with 1%, i would prevent the flickering but it would fk over with the other things i've made. Any idea what i can do it to prvent it with out adding margin to it? Regards!

Answer 1

You are only transitioning the color, change it to 'all' and you're OK.
Also add it to the button class for the reverse action.
button {
font-family: custom-bold;
width: 100%;
font-size: 1.1rem;
outline: none;
padding: 10px;
background-color: rgba(0, 0, 0, 0.322);
border: none;
border-radius: 5px;
color: white;
box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.5);
text-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.5);
transition-property: all;
transition-duration: 0.5s;
}
button:hover {
background-color:rgb(255, 255, 255);
display: inline-block;
transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
overflow: hidden;
transition-property: all;
transition-duration: 0.5s;
color:rgb(0, 0, 0);
}
<button>thatsabutton</button>