CSS3 animate border color

Question

I want to animate borders of an element using CSS3, whether it's in hover state or normal state. Can someone provide me a code snippet for this or can guide?

I can do this using jQuery but looking for some pure CSS3 solution.

Answer 1

You can use a CSS3 transition for this. Have a look at this example:

http://jsfiddle.net/ujDkf/1/

Here is the main code:

#box {   position : relative;   width : 100px;   height : 100px;   background-color : gray;   border : 5px solid black;   -webkit-transition : border 500ms ease-out;   -moz-transition : border 500ms ease-out;   -o-transition : border 500ms ease-out;   transition : border 500ms ease-out; }  #box:hover {    border : 10px solid red;    } 

Answer 2

You can try this also...

button {   background: none;   border: 0;   box-sizing: border-box;   margin: 1em;   padding: 1em 2em;   box-shadow: inset 0 0 0 2px #f45e61;   color: #f45e61;   font-size: inherit;   font-weight: 700;   vertical-align: middle;   position: relative; } button::before, button::after {   box-sizing: inherit;   content: '';   position: absolute;   width: 100%;   height: 100%; }  .draw {   -webkit-transition: color 0.25s;   transition: color 0.25s; } .draw::before, .draw::after {   border: 2px solid transparent;   width: 0;   height: 0; } .draw::before {   top: 0;   left: 0; } .draw::after {   bottom: 0;   right: 0; } .draw:hover {   color: #60daaa; } .draw:hover::before, .draw:hover::after {   width: 100%;   height: 100%; } .draw:hover::before {   border-top-color: #60daaa;   border-right-color: #60daaa;   -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;   transition: width 0.25s ease-out, height 0.25s ease-out 0.25s; } .draw:hover::after {   border-bottom-color: #60daaa;   border-left-color: #60daaa;   -webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;   transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s; }

<section class="buttons">   <button class="draw">Draw</button> </section>