Q:

css button background colour showing another colour in delay in transition

I am trying to button background colour transition on hover. 
I observed that when I hover the button it is showing different colour in delay time. 
Below is the code. 

.button {
  background-color: aqua;
  transition: background-color 1s ease 0.5s;
  width: 500px;
  height: 500px;
  font-size: 24pt;
}

.button:hover {
  background-color: blue;
}

.button:active {
  background-color: rgb(216, 36, 4);
}
<button type="button" class="button">button</button>

If you remove delay time, also you will observe the flickering effect when you hover or select. 
Here is the video on how it is behaving.  https://youtu.be/O0q-SK-eejk
Kindly, Help me to solve it, not to show different colour in delay time. 

A:

The reason you see the gray color is because of the default styles added by the browser for the background property.  Try the following code. 

.button {
  background: inherit;
  background-color: aqua;
  transition: background-color 1s ease 0.5s;
  width: 500px;
  height: 500px;
  font-size: 24pt;
}

.button:hover {
  background: inherit;
  background-color: blue;
}

.button:active {
  background-color: rgb(216, 36, 4);
}
<button type="button" class="button">button</button>

