animated Border around Circle

Question

I have a div with the same width and height border-radius 50%, I need to draw a border around the div on hover with animation. when someone hover on the div then an animated border starts from the right top and moves to bottom > left > top and back to right with a linear effect. It will be very better if someone makes it without jQuery

Possible duplicate of [CSS ONLY Animate Draw Circle with border-radius and transparent background](https://stackoverflow.com/questions/26807610/css-only-animate-draw-circle-with-border-radius-and-transparent-background) — Mohammad Usman, Aug 28 '17 at 11:37

score 0 · Answer 1 · answered Aug 28 '17 at 11:44

    .draw {
      -webkit-transition: color 0.25s;
      transition: color 0.25s;
      border-radius: 50%;
    }
    .draw::before, .draw::after {
      border-radius: 50%;
      border: 3px solid transparent;
      width: 0;
      height: 0;
    }
div {
      background: none;
      border: 0;
      box-sizing: border-box;
      color: #f45e61;
      font-size: inherit;
      font-weight: 700;
      padding: 1em 2em;
      text-align: center;
      margin: 20px;
      position: relative;
      vertical-align: middle;
      width:100px;
    }
    div::before, div::after {
      box-sizing: border-box;
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
    }

and html

 <div class="draw">draw</div>

animated Border around Circle

1 Answers1