CSSで影（Shadow）を2つ使ってボタンをhoverしたときにアニメーションにするプチ・テクニック

さっそくdemoを見てもらった方が分かりやすいと思いますので

DEMO 表示

コード HTML

    <div class="button">
        <a href="">button</a>
    </div>

コード CSS

.button {
    width: 500px;
    margin: 100px auto;
    text-align: center;
}

.button a {
    margin: 0 auto;
    display: block;
    text-decoration: none;
    color: #fff;
    background: green;
    height: 50px;
    width: 50px;
    line-height: 50px;
    padding: 10px;
    border-radius: 50%;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    font-weight: bold;
}

.button a:hover {
    box-shadow: 
    0 0 0 13px #fff,
    0 0 0 15px green
    ;
}