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. アニメーションの準備
CSS

.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を重ねる
CSS

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


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

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

.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の疑似要素のブロックが重なっていたことがわかります。

わかりやすく図にすると、このような形です。
blockOverlap
4. beforeとafterの位置を指定
CSS

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


absoluteの絶対配置でbeforeは左に、afterは右に配置しましょう。
こちらも見た目の変化はありませんが、わかりやすく色を付けると以下のようになります。
CSS

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


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

5. hoverの設定をして完了!
CSS

.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%にすると以下のようになります。
CSS

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


全ソース

HTML

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

.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