CODEWITHSUNDEEP
htmlcss
Prithviraj Mitra
Prithviraj Mitra

Reputation: 11832

draw circle around the arrow using pure css

I have a button which is created using pure CSS.

On mouseover the button an arrow animates from top to bottom.I would like to create a circle just outside the arrow. So the circle should contain the arrow.

I am not sure if it is possible or not. I did some Google research but didn't find a suitable thing.

<a href="#" class="button">
  <span>Hover Me</span>
</a>

The fiddle is here

Upvotes: 1

Views: 4772

Answers (2)

Sobin Augustine
Sobin Augustine

Reputation: 3775

jsFiddle DEMO

.button:hover span:after, .button:active span:after {
    transition: opacity 0.2s, top 0.2s, right 0.2s;
    opacity: 1;
    border-color: #e24500;
    right: 0;
    top: 62%;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     background-color: blue
}

Upvotes: 0

Prisoner
Prisoner

Reputation: 27628

If I understand you, something like this: 

.button span:before {
    content:' ';
    position: absolute;
    top: 0px;
    right: -18px;
    opacity: 0;
    width: 30px;
    height: 30px;
    margin-top: -19px;
    border-radius: 50%;
    background: #000;
    transition: opacity 0.2s, top 0.2s, right 0.2s;
}

Demo: http://jsfiddle.net/DFNn9/4/

Upvotes: 8

Related Questions