【CSS】マウスカーソルを乗せるとクルっと回転するボタンを実装する方法とは？？

TOP > CSS > 【CSS】マウスカーソルを乗せるとクルっと回転するボタンを実装する方法とは？？

2017.04.27

CSS

　当サイトでは、プロフィールページやWORKのページをPCで見た時に、マウスカーソルを乗せるとクルっと回転するボタンを実装しています。
例えば以下のようなもの。

見本のボタン見本のボタン

上の見本は、マウスカーソルを乗せることでボタンがクルっと回転し、白背景のボタンから黒背景のボタンに変わるよう設定しています。

こういうアニメーションがあるものは視覚的にも目を引くものがあると思いますし、個人的にはこういう面白いアニメーションがあるとなんかオシャレな感じ←がして今回実装しているのですが、このボタンの実装方法についてご紹介していきたいと思います！

1 1. HTMLソース
2 2. CSSを設定
3 まとめ

1. HTMLソース

　まず、上のようなアニメーションのあるボタンを実装するには以下のHTMLソースを記述します。

<a href="">
	<span>見本のボタン</span>
	<span>見本のボタン</span>
</a>

2. CSSを設定

　続いてCSSを設定しましょう。
見本は以下になります。

a {
	display: block;
	width: 300px;
	height: 60px;
	text-align: center;
	text-decoration: none;
	line-height: 60px;
	outline: none;
	margin: 0 auto;
	position: relative;
	-webkit-perspective: 300px;
	perspective: 300px;
}

a::before,
a::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}

a,
a::before,
a::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}

a span {
	display: block;
	position: absolute;
	width: 300px;
	height: 60px;
	border: 2px solid #000;
	text-align: center;
	line-height: 60px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
	pointer-events: none;
}

a span:nth-child(1) {
	background-color: #000;
	color: #fff;
	-webkit-transform: rotateX(90deg);
	-moz-transform: rotateX(90deg);
	transform: rotateX(90deg);
	-webkit-transform-origin: 50% 50% -30px;
	-moz-transform-origin: 50% 50% -30px;
	transform-origin: 50% 50% -30px;
}

a span:nth-child(2) {
	background-color: #fff;
	color: #000;
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
	-webkit-transform-origin: 50% 50% -30px;
	-moz-transform-origin: 50% 50% -30px;
	transform-origin: 50% 50% -30px;
}

a:hover span:nth-child(1) {
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
}

a:hover span:nth-child(2) {
	background-color: #000;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
}

それでは順に解説していきたいと思います。

ボタンの大きさを決める

　まず初めにボタンの大きさを決めます。
上の見本のCSSでは1～13行目で設定しており、今回は横幅300px・高さ60pxとしました。
横幅を300pxにしたに従って、11～12行目の

	-webkit-perspective: 300px;
	perspective: 300px;

も300pxとしています。

デフォルトのボタンのデザインを設定する

　続いて33～47行目にてマウスカーソルを乗せる前のデフォルト状態のボタンのデザインを設定しています。
ので、デフォルトのボタンデザインを変更する際にはこの部分を変更しましょう。

マウスカーソルを乗せた時のデザインを設定する

　続いてマウスカーソルを乗せた時のデザインを49～58行にて設定しています。

ちなみに55～57行目にある“-30px”は、今回設定したボタンの高さが60pxなので、その半分の数値である30pxからきています。
なので、ボタンの高さの半分の値にマイナスをつけた数値を設定しておきましょう。

ちなみにここで背景色と文字色を設定していないと以下のような表示になってしまいます。

見本のボタン見本のボタン

なので、ここでちゃんと設定しておかないと悲惨な状態になってしまいます(^^;)

デフォルトのデザインに追加情報を設定する

　続いて60～69行目にて、デフォルトのボタンデザインに追加の情報を設定しています。
ここで背景色と文字色を設定していないと以下のような感じになります。

見本のボタン見本のボタン

なので、ここでもちゃんと背景色と文字色を設定しておくことで、デフォルトで設定したデザインに戻すことができる…ということですね。
そうしないと、マウスカーソルを乗せた時のデザインがちょこっと見えてしまうという状態になってしまいます(*_*)

ちなみに66～68行目の“-30px”という値も、今回設定しているボタンの高さが60pxになっているためその半分の値にマイナスをつけたものとなっています！

ボタンを回転させるCSSを設定

　そして最後に71～82行目でマウスカーソルを乗せた時のアニメーションを設定しています。

ちなみに78行目に背景色を設定していますが、ここで背景色を設定していないと以下のようになってしまいます。。。

見本のボタン見本のボタン

なので、ここではマウスカーソルを乗せた時のボタンの背景色を設定しておきましょう！
(今回でいえば黒色)

まとめ

　以上がマウスカーソルを乗せた時にクルっと回転するボタンの実装方法でした！
設定によっては応用が利くものだと思いますので、是非とも実装してみてはいかがでしょうか(^^)？

TOP > CSS > 【CSS】マウスカーソルを乗せるとクルっと回転するボタンを実装する方法とは？？