html - 純粋なCSSを使用して矢印の周りに円を描く

Question

純粋な CSS を使用して作成されたボタンがあります。

ボタンをマウスオーバーすると、矢印が上から下にアニメーション化されます。矢印のすぐ外側に円を作成したいと思います。したがって、円には矢印が含まれている必要があります。

それが可能かどうかはわかりません。私はいくつかのGoogleの調査を行いましたが、適切なものが見つかりませんでした.

<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/

Answer 2

jsFiddle デモ

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