Kjaal Kjaal - 1 month ago 10
CSS Question

Transition on button border-color is not applied

I am having issues applying a transition to a border color. I have tried almost every possible variation to get this to work.

The HTML



<button class="calltoaction">Click me</button>


The CSS



.calltoaction {
border: 3px;
border-style: solid;
border-color: #ececec;

-webkit-transition: border-color 3ms;
-moz-transition: border-color 3ms;
-ms-transition: border-color 3ms;
-o-transition: border-color 3ms;
transition: border-color 3ms;
}

.calltoaction:hover {
border-color: #000;
}


I have tried Fiddling around with it, but with no luck.

What i have tried




  • transition: all 3ms;

  • Moving/adding the transitions to the
    .calltoaction:hover

  • using the
    border: 1px solid #333
    syntax instead of the current.

  • Surrounding the
    button
    with a
    div



This example is rather simple and should be working, any ideas as to why it doesn't?

Answer

Remember the transition time is counted in milliseconds. You have set it to 3ms which is far too quick. Set it to 3000ms.