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

CSSで影(Shadow)を2つ使ってボタンをhoverしたときにアニメーションにするプチ・テクニック
このエントリーをはてなブックマークに追加
PR

さっそく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
    ;
}

 

 

解説

今回はリンクをboder-radiusで丸くして、その周りにbox-shadowで線を表現しています

ポイントはa:hoverでbox-shadowの値が2つ設定されていることです
2つ設定することが可能で、それによって外の枠線が動いているよなアニメーションになります

box-shadowの値は複数設定する事が出来ます
今回は全体の背景色と同じ色の次に線となる色を設定しています、これを複数重ねることでレインボーにしたり間隔を調整して遊んだりできます。

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)