HOME > > > CSSを使ってクルッと回るボタンを作る方法

CSSを使ってクルッと回るボタンを作る方法

クルリンパ

クルッと回るボタンを作る

Webサイトには必ず必要なナビゲーション。メインナビゲーションの場合hoverした時にあまり大きなアクションではなく、色が変わるなどの方が見やすくて良いのかもしれません。ですが、特別なボタン、ビジュアルを使ったボタンなどはhoverした時にインパクトを与えるアクションがあっても良いかもしれません。
CSSを使ってボタンをクルッと回転させてみましょう。

サンプルはこちら

HTML

まずはHTMLでボタンを設置します。
囲むCSS名は任意で結構です。


<div id="photo">
 <a href="リンクするURL"><img src="ボタンになる画像のパス"></a>
</div>

CSS

CSSを記述します。


#photo {
 height: ボタンになる画像の縦サイズ;
}

#photo {
 float: left;
 text-align: center;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
}
#photo:hover {
 -moz-transform: scaleX(-1);
 -webkit-transform: scaleX(-1);
 -o-transform: scaleX(-1);
}

設置完了

これでクルッと回るボタンの設置完了です。 上記の設定だとクルっとするだけなので、hover設定などをして画像の色を変えるなどすると、もっと裏と表っぽくなって回転感が出ると思います。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket

2014.04.16