サイトを作る上で、なくてはならない”ボタン”。
そのボタンデザインを変更するCSSを勉強する機会があったので、勉強した内容をここに残しておきます。
できるだけシンプルに作りましたので、お好きなようにお使い下さい。
ボタンの知識
ボタンとはなんぞやってところはすっ飛ばして、CSS的な知識を書いていきます。
まずはよくあるシンプルなボタンから。
See the Pen よくあるボタン by 海辺のカラス (@seaside-crow) on CodePen.
これさえわかればボタンデザインを変えられます。
WordPressならstyle.cssに書き込むだけ。
注意点としては、このコードで書くと”ボタンデザインそのものが変わる”ってことですね。
あったらいいなをコードに反映
ボタンに「あったらいいな」って機能を少し足してみました。
See the Pen よくあるボタン-カスタム by 海辺のカラス (@seaside-crow) on CodePen.
追加したのは
・枠線削除
・カーソルをポインターとして表示
・クリックしたときにアウトライン（枠線）が表示されるのを削除
この3つです。
だいぶボタンとして使えるようになりました。
ですが、これだと「本当にボタンか？」ってなるので、もっとわかりやすさを追加してます。
動くボタンに変えちゃう
このままだと味気ないので、動かします。
といっても、実際に動いている訳ではなく、「アクション時に違うデザインを表示させているだけ」です。
カーソルを合わせたとき（ホバー）を例にすると、
カーソルを合わせる前のデザイン{
}
カーソルを合わせたときのデザイン{
}
カーソルを合わせると変わる(hover)
See the Pen よくあるボタン-ホバー by 海辺のカラス (@seaside-crow) on CodePen.
これがホバー時のアクションです。カーソルを合わせるとデザインが変わります。
ボタンではこのホバーアクションが主流です。
ボタンの変化前と変化後は同一色を使うのがいいんじゃないかな。
クリックしてる間だけ変わる（active）
See the Pen よくあるボタン-アクティブ by 海辺のカラス (@seaside-crow) on CodePen.
こっちはあまり需要はないですが、クリックしてる間だけデザインを変えます。
さっきの「button:hover」をacteiveに変えるだけ。
もちろん併用もできます。
See the Pen よくあるボタン-ホバーアクティブ by 海辺のカラス (@seaside-crow) on CodePen.
動き方をふわっと変わるようにする（transition）
See the Pen よくあるボタン-ふわっとホバー by 海辺のカラス (@seaside-crow) on CodePen.
上で紹介したボタンの動きですと、パッと変わりすぎて違和感ありますよね。
それをふわっと変えるようにすれば、ボタンが変化するときの違和感がなじむし、なによりボタンがおしゃれに見えます。
transitionの0.7sで変化する秒数を指定しているのですが、数値を大きくするほど遅い変化になります。
hover前に設定すれば、「指定した秒数かけて変化⇒同じ秒数かけて元に戻る」効果になり、hover後に設定すれば「指定した秒数かけて変化⇒一瞬で戻る」効果になります。
急に戻ると違和感ありまくりなので、基本はhover前の設定でいいかと。
ボタンにおしゃれな線を引く(border)
See the Pen よくあるボタン-枠線 by 海辺のカラス (@seaside-crow) on CodePen.
borderプロパティを使えばボタンに枠線を引くことができます。
ホバー時に指定していなければ枠線が消えます。これだけでも結構いい感じ。
ちなみに、コードとしては、
こうなってます。
なので使い方によってはこんなボタンもできます。
See the Pen よくあるボタン-枠線-カスタム by 海辺のカラス (@seaside-crow) on CodePen.
ビフォーとアフターで違う線を引くことで、同じ色のボタンでもまた違った雰囲気を楽しめますね。
線の色をボタンの色と同一色にすれば影みたいに見えますので、ボタンに立体感を出したいときにも使えますよ。
参考にしたサイト
今回ボタンを勉強する上で参考にしたのは下記サイトです。
ボタンの知識としてはこんなもん
ボタンの基礎的な知識とちょっとした効果について紹介しました。
この辺を知っておけば、だいたいのボタンは作れるんじゃないかなって思います。
今回は勉強用としてコードの横に説明を入れましたが、今度はコピペだけの使いやすいボタンデザイン紹介でもしようかな。
CSSもPHPも学びだすと奥が深いので楽しいもんですね。
