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

株式会社ライズウィル
〒103-0013
東京都中央区日本橋人形町2-15-1
フジタ人形町ビル7F
TEL : 03-4590-3200
FAX : 03-4590-3201
E-Mail : info@risewill.co.jp
URL : https://www.risewill.co.jp