ボタンのデザイン例
まずマウスオーバーやエフェクトなしのボタンのデザインを表示するHTMLコードについて紹介する。(マウスオーバー時の動作等は次回）前回も紹介したように、はてなのデザインCSSを使用せずに個別の記事にHTML/CSSを適用するには<div>～</div>などのタグで囲い、CSSはタグ内のstyleで指定し、インラインで記述する。（例えば<p style="～">と記述する）
ボタンのデザインのコードは CSSのみで実装するボタンデザインのスタイルまとめ | CSSデザインテクニック - chot.design -やCSSで作る汎用性の高いシンプルなボタンデザイン20 | kyomiのコードを利用しているが、インラインで記述するため長くならないように省略できるところは省略している。
枠線からなるボタン
<div><a href="#" style="display:block;position:relative;width:160px;text-align:center;text-decoration:none;color:black;background: white;border:1px solid black;">ボタン</a></div>
シンプルに枠線で構成するボタンを作成する。display:block;でボックスを作成し、サイズはwidth:160px;で指定する。テキストの位置はposition:relative;として相対位置を指定した上で、text-align:center;とすると中央に配置する。テキストの装飾についてはリンクのアンダーバーを取り除く場合はtext-decoration:none;とすればよい。
上のコードでbackground:#795548;として茶色に変更し、さらに文字色はcolor:white;とすることで白に変更できる。
角丸・影付きボタン
<div><a href="#" style="display:block;position:relative;width:160px;text-align:center;text-decoration:none;color:white;background:midnightblue;border:1px solid black;border-radius:5px;box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);">ボタン</a></div>
ボックスの角を丸くするため、border-radius:5px;とする。また影をつけるためには;box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5); 0px 3px 3pxの意味で1番目は影を水平方向右にずらす距離、2番目は垂直方向下にずらす距離、3番目はぼかし距離、rgba()はRGBでの影の色指定と不透明度(Opacity)となる。
グラデーション背景のボタン
<div><a href="#" style="display:block;position:relative;width:160px;text-align:center;text-decoration:none;color:white;background: linear-gradient(20deg, #C2FAB0, #0A2800);border:1px solid black;border-radius:5px;box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);">ボタン</a></div>
グラデーションを入れる場合はbackground:midnightblue;の代わりにbackground:linear-gradient(20deg, #C2FAB0, #0A2800);を入れる。linear-gradientではグラデーションの角度、開始色、終了色をそれぞれ指定する。linear-gradientは一方向のグラデーションだが、radial-gradientは円の中心から半径方向のグラデーションにすることができる。
縫い目ボタン
<div><a href="#" style="display:block;position:relative;width:160px;text-align:center;text-decoration:none;color:white;background: #795548;border:1px dashed white;border-radius:5px; box-shadow: 0px 0px 0px 5px #795548">ボタン</a></div>
影をつくるために使用したbox-shadowを使用し、box-shadow 0px 0px 0px 5px #795548;とする。4番目の5pxは影を全方向に拡大する距離、影の色はさきほどはrgba()を使用したが今回はbackgroundに使用したカラーコードで指定する。結果としてボックスの背景色を拡大させることができる。縫い目は、境界線をダッシュ線とするようにborder:1px dashed white;とする。
円形ボタン
<div><a href="#" style="display:block;position:relative;width:50px;height:50px;line-height:65px;text-align:center;text-decoration:none;color:#1E90FF;background:#E4FF8D;border-radius:50%;"><i class="fas fa-power-off fa-2x"></i></a></div>
四角だけでなく円形のボタンを作成するには、ボックスの縦横を同じサイズ(width:50px;height:50px;)にしてborder-radius:50%;とする。またデザインCSSでFontAwesomeを使えるようにしているので、htmlタグ内に<i class="fas fa-power-off fa-2x"></i>を入れればFontAwesomeの電源アイコンがそのまま使える。
FontAwesomeの設定については下の記事も参照 atatat.hatenablog.com
