CSS transition not working when mouse moved off link - css

Question

im having some troubles with my CSS, i have a button i made and i have given it some CSS to add a color changing effect with webkit transition, the color change works on hover but when mouse is taken off button it wont show effect of it returning to how it was before, heres my css
.button-blue{
border: 1px solid #00B7EF;
border-radius: 5px;
color: #00B7EF !important;
background-color: transparent;
-webkit-transition-property: background-color, color;
-webkit-transition-duration: 0.5s;
webkit-property: background-color, color;
webkit-duration: 0.5s;
}
.button-blue:hover {
border: 1px solid #00B7EF;
border-radius: 5px;
color: white !important;
background-color: #00B7EF;
-webkit-transition-property: background-color, color;
-webkit-transition-duration: 0.5s;
webkit-property: background-color, color;
webkit-duration: 0.5s;
}

Answer 1

You already have transition properties for your href stated previously so just state it once with your href before and remove the transition properties from your button so your css would look like the following:
Working fiddle Fiddle
.navigation-bar ul li a {
color: #333333;
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-size: 19px;
font-weight: 400;
font-style: bold;
padding: 5px 5px 10px 10px;
-webkit-transition-property: background-color, color;
-webkit-transition-duration: 0.5s;
webkit-property: background-color, color;
webkit-duration: 0.5s;
}
.button-blue{
border: 1px solid #00B7EF;
border-radius: 5px;
color: #00B7EF !important;
background-color: transparent;
}
.button-blue:hover {
border: 1px solid #00B7EF;
border-radius: 5px;
color: white !important;
background-color: #00B7EF;
}

Answer 2

webkit-property and webkit-duration aren't CSS properties.
The correct syntax is transition-property and
transition-duration.
-webkit- is only a vendor prefix for CSS features on Google Chrome
and newer versions of Opera.
In pseudoclasses as :hover state, you only have to declare
properties that you will change, isn't necessary repeat already
declared ones. So, border-radius is out (unless you
want to change it).
You have to set the transition in the default state. If you declare
again on :hover state, you are creating a second instance for the
transition, that's why you got this animation on your button.
You already have declared a transition in .navigation-bar ul li a (And have a transition only for color, not background).
So, now you have a problem with specificity, because targeting a parent class and then directly targeting to an HTML
element in CSS has more priority than targeting only a class
(You can check it here).
If all of your a element in your .navigation-bar will have
the same transition, you can set it here. (Not ideal, but it works
cleaner and will be less changes.)
You also need to add a transition for background. This doesn't alter
the rest of your links, because if you don't set a background in
hover (or focus) state, it will not change.
And obviously, you have to remove the transition from
.button-blue, because you will not use it anymore (It would be
repetitive).
Try to modularise more your CSS (don't repeat yourself). You
can learn more searching for BEM, OOCSS or SMACSS
(It's a matter of taste)