divタグのボタンにcssで動きをつける


# はじめに
Webサイトにある最近のボタンってカーソルをあてると、色が変わったりしますよね？
あれって、私ははじめJavascriptで実装しているものだと思っていましたが、
ある時、CSSの仕様を見てたら、「transition」なんてものが！？

# 実装

まずは、下のHTMLをファイルに貼り付けて、ブラウザで表示してみてください。
新しいブラウザだと、左に色付きのボタンが縦に並んでいて、
その右に、灰色のボタンが縦に並んでます。

右の灰色のボタンに、カーソルを当てると、いろいろな動きをしてボタンの色が変わるはずです。

※：灰色以外のボタン色は、Excelの色合いを真似ています。

```html:divbtn.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Div Button</title>
	</head>
	<style>
		* {
			font-family: Arial;
			font-size: 16px;
		}
		.basebluebtn {
			position: relative;
			width: 200px;
			height: 50px;
			border: 3px solid #385D8A;
			background-color: #4F81BD;
			color: white;
			text-align: center;
			line-height: 50px;
			border-radius: 10px;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: pointer;
			z-index: 1;
			overflow: hidden;
		}
		.baseredbtn {
			position: relative;
			width: 200px;
			height: 50px;
			border: 3px solid #8C3836;
			background-color: #C0504D;
			color: white;
			text-align: center;
			line-height: 50px;
			border-radius: 10px;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: pointer;
			z-index: 1;
			overflow: hidden;
		}
		.basegreenbtn {
			position: relative;
			width: 200px;
			height: 50px;
			border: 3px solid #71893F;
			background-color: #9BBB59;
			color: white;
			text-align: center;
			line-height: 50px;
			border-radius: 10px;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: pointer;
			z-index: 1;
			overflow: hidden;
		}
		.basepurplebtn {
			position: relative;
			width: 200px;
			height: 50px;
			border: 3px solid #5C4776;
			background-color: #8064A2;
			color: white;
			text-align: center;
			line-height: 50px;
			border-radius: 10px;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: pointer;
			z-index: 1;
			overflow: hidden;
		}
		.baseskybtn {
			position: relative;
			width: 200px;
			height: 50px;
			border: 3px solid #358091;
			background-color: #4BACC6;
			color: white;
			text-align: center;
			line-height: 50px;
			border-radius: 10px;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: pointer;
			z-index: 1;
			overflow: hidden;
		}
		.baseorangebtn {
			position: relative;
			width: 200px;
			height: 50px;
			border: 3px solid #B66D31;
			background-color: #F79646;
			color: white;
			text-align: center;
			line-height: 50px;
			border-radius: 10px;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: pointer;
			z-index: 1;
			overflow: hidden;
		}
		.basegraybtn {
			position: relative;
			width: 200px;
			height: 50px;
			border: 3px solid gray;
			background-color: darkgray;
			color: white;
			text-align: center;
			line-height: 50px;
			border-radius: 10px;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: pointer;
			z-index: 1;
			overflow: hidden;
		}
		.bluebtn {
			position: relative;
			width: 200px;
			height: 50px;
			border: 3px solid gray;
			background-color: darkgray;
			color: white;
			text-align: center;
			line-height: 50px;
			border-radius: 10px;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: pointer;
			z-index: 1;
			overflow: hidden;
			transition: all 0.5s;
		}
		.bluebtn::after {
			position: absolute;
			content: '';
			top: 0;
			left: 0;
			width: 0;
			height: 100%;
			background-color: #4F81BD;
			z-index: -1;
			transition: all 0.5s;
		}
		.bluebtn:hover {
			border: 3px solid #385D8A;
		}
		.bluebtn:hover::after {
			width: 100%;
		}
		.redbtn {
			position: relative;
			width: 200px;
			height: 50px;
			color: white;
			border: 3px solid gray;
			background-color: darkgray;
			text-align: center;
			line-height: 50px;
			border-radius: 10px;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: pointer;
			z-index: 1;
			overflow: hidden;
			transition: all 0.5s;
		}
		.redbtn::after {
			position: absolute;
			content: '';
			top: 0;
			right: 0;
			width: 0;
			height: 100%;
			background-color: #C0504D;
			z-index: -1;
			transition: all 0.5s;
		}
		.redbtn:hover {
			border: 3px solid #8C3836;
		}
		.redbtn:hover::after {
			width: 100%;
		}
		.greenbtn {
			position: relative;
			width: 200px;
			height: 50px;
			border: 3px solid gray;
			background-color: darkgray;
			color: white;
			text-align: center;
			line-height: 50px;
			border-radius: 10px;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: pointer;
			z-index: 1;
			overflow: hidden;
			transition: all 0.5s;
		}
		.greenbtn::after {
			position: absolute;
			content: '';
			bottom: 0;
			left: 0;
			width: 100%;
			height: 0;
			background-color: #9BBB59;
			z-index: -1;
			transition: all 0.5s;
		}
		.greenbtn:hover {
			border: 3px solid #71893F;
		}
		.greenbtn:hover::after {
			height: 100%;
		}
		.purplebtn {
			position: relative;
			width: 200px;
			height: 50px;
			border: 3px solid gray;
			background-color: darkgray;
			color: white;
			text-align: center;
			line-height: 50px;
			border-radius: 10px;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: pointer;
			z-index: 1;
			overflow: hidden;
			transition: all 0.5s;
		}
		.purplebtn::after {
			position: absolute;
			content: '';
			top: 0;
			left: 0;
			width: 100%;
			height: 0;
			background-color: #8064A2;
			z-index: -1;
			transition: all 0.5s;
		}
		.purplebtn:hover {
			border: 3px solid #5C4776;
		}
		.purplebtn:hover::after {
			height: 100%;
		}
		.skybtn {
			position: relative;
			width: 200px;
			height: 50px;
			border: 3px solid gray;
			background-color: darkgray;
			color: white;
			text-align: center;
			line-height: 50px;
			border-radius: 10px;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: pointer;
			z-index: 1;
			overflow: hidden;
			transition: all 0.5s;
		}
		.skybtn::after {
			position: absolute;
			content: '';
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #4BACC6;
			transform: rotateY(90deg);
			z-index: -1;
			transition: all 0.5s;
		}
		.skybtn:hover {
			border: 3px solid #358091;
		}
		.skybtn:hover::after {
			transform: rotateY(0deg);
		}
		.orangebtn {
			position: relative;
			width: 200px;
			height: 50px;
			border: 3px solid gray;
			background-color: darkgray;
			color: white;
			text-align: center;
			line-height: 50px;
			border-radius: 10px;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: pointer;
			z-index: 1;
			overflow: hidden;
			transition: all 0.5s;
		}
		.orangebtn::after {
			position: absolute;
			content: '';
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #F79646;
			transform: rotateX(90deg);
			z-index: -1;
			transition: all 0.5s;
		}
		.orangebtn:hover {
			border: 3px solid #B66D31;
		}
		.orangebtn:hover::after {
			transform: rotateX(0deg);
		}
		.graybtn {
			position: relative;
			width: 200px;
			height: 50px;
			border: 3px solid gray;
			background-color: darkgray;
			color: white;
			text-align: center;
			line-height: 50px;
			border-radius: 10px;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: pointer;
			z-index: 1;
			overflow: hidden;
		}
		.graybtn::after {
			position: absolute;
			content: '';
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
			transition: all 0.5s;
			border-radius: 50%;
			border: 10px double white;
			margin: -10px 0 0 -10px;
			transform: scale(0, 0);
		}
		.graybtn:hover::after {
			transform: scale(2, 2);
		}
	</style>
	<body>
		<table>
			<tr>
				<td>
					<div class="basebluebtn">BLUE BUTTON</div>
					<br>
					<div class="baseredbtn">RED BUTTON</div>
					<br>
					<div class="basegreenbtn">GREEN BUTTON</div>
					<br>
					<div class="basepurplebtn">PURPLE BUTTON</div>
					<br>
					<div class="baseskybtn">SKY BUTTON</div>
					<br>
					<div class="baseorangebtn">ORANGE BUTTON</div>
					<br>
					<div class="basegraybtn">GRAY BUTTON</div>
				</td>
				<td>
					<div class="bluebtn">BLUE BUTTON</div>
					<br>
					<div class="redbtn">RED BUTTON</div>
					<br>
					<div class="greenbtn">GREEN BUTTON</div>
					<br>
					<div class="purplebtn">PURPLE BUTTON</div>
					<br>
					<div class="skybtn">SKY BUTTON</div>
					<br>
					<div class="orangebtn">ORANGE BUTTON</div>
					<br>
					<div class="graybtn">GRAY BUTTON</div>
				</td>
			</tr>
		</table>
	</body>
</html>
```

# 解説

**動き**
基本的に、「xxxbtn」に対し、after擬似要素「xxxbtn::after」を背景として、設定しており。
最初は、背景が見えない（幅を0にしていたり、背景を回転していたり）ようにしておき、カーソルが乗った時に、「xxxbtn:hover」「xxxbtn:hover::after」によって変更します。
それを、CSSの「transition: all 0.5s;」で0.5秒かけて変化するようにしてます。

**背景**
after擬似要素を背景としているのは、「z-index」でマイナス値「-1」に設定することで実現しています。親要素には、明示的に「1」を設定しています。
そして、ぴったりと背景を合わせる為に、本要素に「position: relative;」、after擬似要素に「position: absolute;」を設定し、「top，left，right，bottom」の配置位置で固定することにより実現しています。
また、背景の方が大きい為、本要素に「overflow: hidden;」をつけて、はみ出ても表示されないようにしています。

**背景表示**
青色のボタンは、左→右に色が現れます。
これは、「top: 0;」「left: 0;」で左上に起点を置き、「width: 0;」から「width: 100%;」まで変化させる事により実現しています。

赤色のボタンは、右→左に色が現れます。
同様に、「top: 0;」「right: 0;」で右上に起点を置き、「width: 0;」から「width: 100%;」まで変化させる事により実現しています。

緑色のボタンは、下→上に色が現れます。
同様に、「bottom: 0;」「left: 0;」で左下に起点を置き、「height: 0;」から「height: 100%;」まで変化させる事により実現しています。

紫色のボタンは、上→下に色が現れます。
同様に、「top: 0;」「left: 0;」で左下に起点を置き、「height: 0;」から「height: 100%;」まで変化させる事により実現しています。

空色のボタンは、真ん中から左右に色が現れます。
これは、「transform: rotateY(90deg);」でY軸に対して90度回転させておき、「transform: rotateY(0deg);」により、0度まで変化させる事により実現しています。

橙色のボタンは、真ん中から上下に色が現れます。
これは、「transform: rotateX(90deg);」でX軸に対して90度回転させておき、「transform: rotateX(0deg);」により、0度まで変化させる事により実現しています。


**その他**
ボタンなので、選択出来ないように「-moz-user-select: none;」「-webkit-user-select: none;」「-ms-user-select: none;」を設定してあります。
※：はやく「user-select」が標準になって欲しい・・・

また、カーソルを「cursor: pointer;」としています。

# おわりに
いろいろと調べてみると、もっと凄い技で実現しているサイトが多々あるので、この記事がどこまで参考になるかは不明ですが、まずは簡易的に試すのには十分なんではないかと思っています。
参考になれば幸いです。