Kjaal Kjaal - 10 months ago 57
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.


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


.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

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

  • Surrounding the
    with a

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

Answer Source

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