使用纯css在箭头周围绘制圆圈

Question

我有一个使用纯CSS创建的按钮.

鼠标悬停在按钮上时,箭头从上到下进行动画制作.我想在箭头外部创建一个圆圈.所以圆圈应该包含箭头.

我不确定是否可能.我做了一些谷歌研究,但没有找到合适的东西.

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

小提琴在这里

Answer 1

如果我理解你,就像这样:

.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;
}

演示:http://jsfiddle.net/DFNn9/4/