今どきのホームページでは、ホバーアクションがあるのが当たり前のように感じます。
また、1つ1つのホバーアクションが作り込まれていて、作りを見させてもらうと「なるほど！？」と思うような作りをしていて、参考にさせてもらっています。
そんな今どきのホームページに組み込まれているかっこいいホバーアクションの中から、今回はcssだけで作れる10個のホバーアクションの作り方をご紹介したいと思います。
ベースとなるボタンのスタイル
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .btn a { background: #eb493c; color: #fff; display: block; font-size: 16px; font-weight: bold; height: 100px; line-height: 100px; overflow: hidden; position: relative; text-align: center; text-decoration: none; width: 200px; } |
１：矢印が右に隠れて左から表示
同じ矢印画像をbeforeとafter両方に置いて、beforeは初期表示時に非表示になるように設定。
afterは初期表示されている位置に設定します。
後は、ホバー時にtranslateXを使って同じ方向に同じpx分それぞれの画像を移動させるとできます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | .btn01 a:before{ background: url(img/common/arrow.png) no-repeat; content: ""; height: 33px; left: -40px; margin: -17px 0 0; position: absolute; top: 50%; -webkit-transition: -webkit-transform .4s; transition: transform .4s; width: 20px; } .btn01 a:hover:before{ -webkit-transform: translateX(60px); transform: translateX(60px); } .btn01 a:after{ background: url(img/common/arrow.png) no-repeat; content: ""; height: 33px; margin: -17px 0 0; position: absolute; right: 20px; top: 50%; -webkit-transition: -webkit-transform .4s; transition: transform .4s; width: 20px; } .btn01 a:hover:after{ -webkit-transform: translateX(60px); transform: translateX(60px); } |
２：枠線の色が左から変化
枠線になっている部分は、borderを使うのではなくbackgroundで線の色を出しています。
backgroundで線の色を表示している要素の上にbeforeで背景白の要素を設定します。
backgroundで線の色を表示している要素には、paddingで1px分の余白を付けているので、
全面が白で隠れるのでは無く、余白の部分に背景色が付き、borderが設定されているように見えます。
後は 新しい色 のafter要素を2つの要素の間に入るようにz-indexで設定して、左から右にtranslateXでスライド表示させるとできます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | .btn02 a { background-color: #eb493c; box-sizing: border-box; padding: 1px; z-index: 1; } .btn02 a .inner-text { color: #eb493c; display: block; left: 0; position: absolute; top: 0; width: 100%; z-index: 3; } .btn02 a:before, .btn02 a:after { content: ''; display: block; height: 100%; position: absolute; width: 100%; } .btn02 a:before { background: #fff; position: relative; z-index: 3; } .btn02 a:after { background: #97ca65; left: 0; top: 0; -webkit-transition: .4s; transition: .4s; -webkit-transform: translateX(-100%); transform: translateX(-100%); z-index: 2; } .btn02 a:hover:after { -webkit-transform: translateX(0); transform: translateX(0); } |
３：文字の後ろで丸が拡大表示
表示させる丸の位置は、top、leftで指定するのですが、
そのままでは、その指定した位置が丸の中心にはならないので、
translateで-50%を設定してその位置に丸の中心がくるように設定しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | .btn03 a .circle { background: #97ca65; border-radius: 100%; display: block; height: 0; left: 50%; position: absolute; top: 50%; -webkit-transition: width 0.3s, height 0.3s; transition: width 0.3s, height 0.3s; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 0; } .btn03 a:hover .circle { height: 40px; width: 40px; } .btn03 a .inner-text { display: block; left: 0; position: absolute; top: 0; width: 100%; z-index: 3; } |
４：説明ブロックがふわっと表示
ポイントは、cubic-bezierで動きを設定する事です。
cubic-bezierで「quarticEaseOut」の動きを設定しているのですが、少し設定を変えるだけで、クオリティを大きく上げてくれます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | .btn04 a .over { background-color: #fff; bottom: 15px; color: #eb493c; left: 15px; margin: auto; opacity: 0; position: absolute; right: 15px; text-align: center; top: 15px; -webkit-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: scale(0.95); transform: scale(0.95); z-index: 1; } .btn04 a .over span { font-style: normal; font-size: 16px; font-weight: bold; left: 0; line-height: 28px; margin-top: -14px; opacity: 0; position: absolute; text-align: center; top: 50%; -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transition-delay: 0.1s; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s; -webkit-transform: translate(0, 20px); transform: translate(0, 20px); width: 100%; } .btn04 a:hover .over { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .btn04 a:hover .over span { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } |
５：下線・横線とくっつくように動く
ポイントはホバー時の位置の指定方法です。
ホバーした時にaタグで囲まれている部分をmarginで動かしたい方向に移動させる事と
beforeとafterで指定している周りの線をaタグに近づけるように位置設定をすることでこの動きを実現しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | .btn05 a { position: absolute; z-index: 1; color: #eb493c; box-sizing: border-box; border: 1px solid #eb493c; transition: all 0.1s ease; -webkit-transition: all 0.1s ease; overflow: visible; background: none; } .btn05 a:before { content: ""; width: 200px; height: 1px; position: absolute; border-bottom: 1px solid #eb493c; bottom: -10px; left: 8px; transition: all 0.1s ease; -webkit-transition: all 0.1s ease; } .btn05 a:after { content: ""; width: 1px; height: 100px; position: absolute; border-right: 1px solid #eb493c; bottom: -10px; right: -10px; transition: all 0.1s ease; -webkit-transition: all 0.1s ease; } .btn05 a:hover { margin: 6px 0 0 6px; } .btn05 a:hover:before { bottom: -1px; left: -1px; } .btn05 a:hover:after { bottom: -1px; right: -1px; } |
６：左から線が伸びる
transform-originを使うことでどの位置から線が伸びるようにするかを指定することができます。
今はleftを指定していますが、rightを指定すると右側から線が伸びるようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .btn06 a:before { transform: scaleX(0); -webkit-transform-origin: left; transform-origin: left; -webkit-transition-duration: .2s; transition-duration: .2s; transition-timing-function: cubic-bezier(.25, .46, .45, .94); width: 100%; height: 3px; display: block; content: ''; margin-top: 8px; background-color: #97ca65; position: absolute; } .btn06 a:hover:before { transform: scaleX(1); } |
７：4つ角から線が伸びる
aタグとaタグ内に設定したspan要素の
beforeとafterにホバー時に表示する線の起点になる位置を設定します。
hover時にそれぞれwidth、heightを100%にするとそれぞれ反対の角に向かって線が伸びるように見えます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | .btn07 a:hover:before, .btn07 a:hover:after { width: 100%; } .btn07 a:hover .line:before, .btn07 a:hover .line:after { height: 100%; } .btn07 a:before { background-color: #97ca65; content: ""; display: block; position: absolute; z-index: 10; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; bottom: 0; height: 10px; right: 0; width: 0; } .btn07 a:after { background-color: #97ca65; content: ""; display: block; position: absolute; z-index: 10; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; height: 10px; left: 0; top: 0; width: 0; } .btn07 a .line:before { background-color: #97ca65; content: ""; display: block; position: absolute; z-index: 10; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; height: 0; right: 0; top: 0; width: 10px; } .btn07 a .line:after { background-color: #97ca65; content: ""; display: block; position: absolute; z-index: 10; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; bottom: 0; height: 0; left: 0; width: 10px; } |
８：閉まるような動き
rotateXを設定して初期表示時には非表示になるようにしておき、ホバー時に0degを指定することで表示させています。
cubic-bezierの最後の値を大きくすることで一度閉じた後に弾んだように見せることができるところもポイントです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .btn08 a:after { z-index: 1; content: 'close'; position: absolute; left: 0; top: 0; background: #97ca65; width: 100%; height: 100%; -webkit-transition: all .4s cubic-bezier(0.175, 0.885, 0.32, 1.4); transition: all .4s cubic-bezier(0.175, 0.885, 0.32, 1.4); -webkit-transform: rotateX(180deg); transform: rotateX(180deg); -webkit-transform-origin: top center; transform-origin: top center; } .btn08 a:hover:after { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } |
９：左から色が変わって右に抜けていく
ポイントは、transform-originの使い方です。
初期設定では、transform-originにrightを設定していますが、
ホバー時にleftを指定することで、ホバーする時は左から表示されて、ホバー状態が外れると右に動くようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | .btn09 a:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scaleX(0); transform-origin: right; transition: transform .7s cubic-bezier(.19, 1, .22, 1); background: #97ca65; } .btn09 a:hover:before { transform: scaleX(1); transform-origin: left; } .btn09 a .inner-text { position: absolute; z-index: 3; top: 0; left: 0; display: block; width: 100%; } |
１０：4辺の中心から4つ角に向かって線が太くなっていく
4辺の中央から太線を表示させるために、
aタグ内にspan要素を設定するのは7つ目と同じなのですが、
各辺の中心から太くなっていくように見せるために、transform-originでcenterを設定しているところがポイントです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | .btn10 a { color: #eb493c; border: 1px solid #eb493c; background: none; } .btn10 a .bl { transition-duration: 0.5s; transition-property: opacity; transition-delay: 0s; transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 0; } .btn10 a:hover .bl { transition-duration: 0.5s; transition-property: opacity; transition-delay: 0s; transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 1; } .btn10 a .bl-a:before { background: #eb493c; transition-duration: 0.5s; transition-property: transform; transition-delay: 0s; transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); width: 100%; height: 2px; position: absolute; top: 0; left: 0; transform: scaleX(0); content: ""; } .btn10 a .bl-a:after { background: #eb493c; transition-duration: 0.5s; transition-property: transform; transition-delay: 0s; transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); width: 2px; height: 100%; position: absolute; top: 0; right: 0; transform: scaleY(0); content: ""; } .btn10 a .bl-b:before { background: #eb493c; transition-duration: 0.25s; transition-property: transform; transition-delay: 0s; transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); width: 100%; height: 2px; position: absolute; bottom: 0; right: 0; transform: scaleX(0); content: ""; } .btn10 a .bl-b:after { background: #eb493c; transition-duration: 0.5s; transition-property: transform; transition-delay: 0s; transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); width: 2px; height: 100%; position: absolute; bottom: 0; left: 0; transform: scaleY(0); content: ""; } .btn10 a:hover .bl-a:before { transition-duration: 0s; transition-property: transform; transition-delay: 0s; transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: scaleX(1); transform-origin: center center; } .btn10 a:hover .bl-a:after { transition-duration: 0.5s; transition-property: transform; transition-delay: 0s; transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: scaleY(1); transform-origin: center center; transition-timing-function: linear; } .btn10 a:hover .bl-b:before { transition-duration: 0.25s; transition-property: transform; transition-delay: 0s; transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: scaleX(1); transform-origin: center center; transition-timing-function: linear; } .btn10 a:hover .bl-b:after { transition-duration: 0.5s; transition-property: transform; transition-delay: 0s; transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transform: scaleY(1); transform-origin: center center; } |
さいごに
使っているスタイル自体は同じようなものなのですが、指定の仕方によって様々な変化を与えることができます。
それぞれのスタイルがどのように使うものかということを理解できれば、自分で考えて設定することができるようになりますので、ぜひこの機会に覚えてみてはいかがでしょうか。
ここまで読んで頂きありがとうございました。
原田
■参考にさせて頂いた記事
CSSのみで実装するキャプションエフェクト 20
CSS3のtransition-timing-functionの値、cubic-bezier()に関して
