CSS3で作るボタンのホバーエフェクトその1

Webデザイナーのモリゾーです。

昨今ではHTML5やJavascriptを用いた動きのあるサイトが増えてきましたね。

Adobeが「Flash」から「HTML5」へ移行を促す発言も新しいです。

■アドビ自らFlashに白旗宣言…。HTML5への移行を推奨
http://www.gizmodo.jp/2015/12/flashhtml5must.html

時代に合ったウェブサイトを作るために、まずは簡単なものから一緒に学んでいきましょう！

・当記事は「HTML」と「CSS」の最低限の知識を持っていることを前提といたします。
・PCでの動作を想定したものです。モバイルの動作は想定しておりません。
・CSS3に対応していないブラウザ（IE9以下等）については動作を保証しておりません。

CSS3のみで実装するホバーエフェクト

今回はこちらのボタンを作ります！

作成工程

1. ベースのボタンを作成

HTML

<div class="button">ボタン</div>

CSS

.button {
     display: inline-block;
     width: 200px;
     height: 50px;
     text-align: center;
     text-decoration: none;
     outline: none;
     background-color: #333;
     border: 2px solid #333;
     color: #fff;
     line-height: 50px;
     position: relative; /* absolute用の左上を0 0の座標とした基点準備 */
     z-index: 2;         /* ボックスの重なりの順序指定 */
}

至って普通のボタンが出来ましたね。

2. アニメーションの準備

.button,
.button::before,
.button::after {
     -webkit-box-sizing: border-box; /* paddingとborderを幅と高さに含める */
     -moz-box-sizing: border-box;    /* paddingとborderを幅と高さに含める */
     box-sizing: border-box;         /* paddingとborderを幅と高さに含める */
     -webkit-transition: all .5s;    /* transition効果（時間的変化）をまとめて指定 */
     transition: all .5s;            /* transition効果（時間的変化）をまとめて指定 */
}

box-sizingにより、border:2px はボックスの幅に含まれないようになりました。
幅は204pxから200pxに。
縦は54pxから50pxになりました。

transitionはtransition効果（時間的変化）をまとめて指定しています。
「all」はbackground-colorやテキストのcolorなど全てのプロパティを変化させる時に指定します。
「5s」はアニメーションで変化する時間の長さを指定しています。

この時点ではイベントの設定(hoverの設定等)をしていないのでまだアニメーションは動きません。

3. beforeとafterを重ねる

.button::before,
.button::after {
     position: absolute;  /* 親要素のrelativeを適用した基点から絶対位置への配置 */
     z-index: -1;         /* ボックスの重なりの順序指定 */
     display: block;
     content: '';
     top: 0;         /* absoluteの位置を指定 */
     width: 50%;
     height: 100%;
     background-color: #333;
}

一見なにも変わっていないように見えます。

例えば先ほど指定した値を変えたり、色を加えたりすると…

.button::before{
     top: 25px;                  /* absoluteの位置を指定 */
     left: 10px;                 /* absoluteの位置を指定 */
     background-color:#1C751C;   /* ::before 緑色 */
}
.button::after {
     top: 60px;                  /* absoluteの位置を指定 */
     left: 20px;                 /* absoluteの位置を指定 */
     background-color:#918F3A;   /* ::after 黄色 */
}

beforeとafterの疑似要素のブロックが重なっていたことがわかります。

わかりやすく図にすると、このような形です。

4. beforeとafterの位置を指定

.button::before {
     left: 0;
}
.button::after {
     right: 0;
}

absoluteの絶対配置でbeforeは左に、afterは右に配置しましょう。

こちらも見た目の変化はありませんが、わかりやすく色を付けると以下のようになります。

.button::before {
     left: 0;
     background-color:#1C751C;
}
.button::after {
     right: 0;
     background-color:#918F3A;
}

配置したことで、両側にアニメーションが動くようになります。

5. hoverの設定をして完了！

.button:hover {
     background-color: #fff;
     border-color: #59b1eb;
     color: #59b1eb;
}
.button:hover::before,
.button:hover::after {
     width: 0;          /* 元は50%の幅をゼロに設定しています。 */
     background-color: #59b1eb;
}

完成！

beforeとafterの幅を50%から0にする箇所が少しややこしいですが、
例えばbeforeとafterの幅を50%から25%にすると以下のようになります。

.button:hover::before,
.button:hover::after {
     width: 25%; 
     background-color: #59b1eb;
}

全ソース

<div class="button">ボタン</div>

.button {
	display: inline-block;
	width: 200px;
	height: 54px;
	text-align: center;
	text-decoration: none;
	line-height: 54px;
	outline: none;
	background-color: #1C8BBD;
	border: 2px solid #066590;
	color: #fff;
	line-height: 50px;
	position: relative; 
	z-index: 2; 
	cursor: pointer;
}
.button,
.button::before,
.button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; 
	-webkit-transition: all .5s;
	transition: all .5s; 
}
.button::before,
.button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
	top: 0;
	width: 50%;
	height: 100%;
	background-color: #1C8BBD;
}
.button::before {
	left: 0;
}
.button::after {
	right: 0;
}
.button:hover {
	background-color: #fff;
	border-color: #59b1eb;
	color: #59b1eb;
}
.button:hover::before,
.button:hover::after {
	width: 0;
	background-color: #59b1eb;
}

応用アレンジ

いかがでしたでしょうか。

このように仕組みを解析したり、ボタンをアレンジすることで理解力が増すかと思います。

また、解析やアレンジにはデベロッパーツールを活用しましょう。
縦幅の数値を変えたり、適用されているCSSを消してみたりと、構造の理解には必要不可欠です。

参考にさせていただいたサイト
■Nxworld
http://www.nxworld.net/tips/css-only-button-design-and-hover-effects.html