CSS Transition Effect :: Text changing color, but not border

Question

I'm trying to apply a transition effect to some icons. The transition works for the font (FontAwesome), but not for the border, and I'm not sure why. Been trying since yesterday, combed through the web including stackoverflow, but nothing.

You can see the example here , and here is the code:

.social-nets-wrapper .social li a {color: rgb(53, 61, 68); font-size: 35px; border-color: #272F37;}

.social-nets-wrapper .social li a::before {background-color: #272f37;}

.social-nets-wrapper .social li a:hover {color: #f7941e; border-color: #f7941e; transition: all 300ms linear 0s;}

Any suggestions are greatly appreciated.

Answer 1

You have set in some place of your CSS:

.social-nets-wrapper .social li a:hover {
    text-decoration: none;
    border-color: #FFF !important;
}

Then, you need to put:

.social-nets-wrapper .social li a:hover {
    color: #F7941E;
    border-color: #F7941E !important; /* add !important to override */
    transition: all 300ms linear 0s;
}

Or better, find the wrong declaration an fix it with the right one.