ボタン

See the Pen 【ボタン】シンプル by 早稲田電子IT教育センター (@wit-it) on CodePen.

1. サンプルのボタンはどちらも中央に配置されており、<a> 要素をテキストリンクではなくボタンとして扱いたいため、display プロパティで表示形式を切り替えています。
2. 一つ目のリンクボタンは、ブロック要素である <p> に text-align: center; を指定し、その中に配置された <a> 要素には display: inline-block; を適用してボタンとして表示しています。
3. 二つ目のリンクボタンは、<a> 要素に display: block; を適用し、幅は内容に合わせて変化する width: fit-content; を使用しています。中央配置は、margin-inline: auto; によって左右のマージンを自動化することで実現しています。
4. ホバー時、各ボタンの色が反転します。

See the Pen 【ボタン】2 by 早稲田電子IT教育センター (@wit-it) on CodePen.

1. ボタンの大きさは、ボタン内の文字量で変化します。
2. マウスホバー時の動きに、 translate: 0 -3px; を指定し上へ動かしています。
3. <a>要素には display: inline-block; を設定しているため、<a>要素を兄弟要素として書いた場合横に並びます。
4. ただし、要素を改行して記述した場合、ボタンの間には半角スペース1文字分の隙間が空きます。

See the Pen 【ボタン】3 by 早稲田電子IT教育センター (@wit-it) on CodePen.

1. <button>要素に装飾設定したものになります。

See the Pen 【ボタン】4 by 早稲田電子IT教育センター (@wit-it) on CodePen.

1. ボタン左側に配置したアイコンは、::before で生成しています。使用目的に合わせてアイコンを変えてください。背景での設定も可です。
2. :root で各色変数を設定しています。ここを好きな色に変えれば連動して適用されます。

See the Pen 【ボタン】ナビゲーション 1 by 早稲田電子IT教育センター (@wit-it) on CodePen.

1. ナビゲーションボタンの配置に display: flex; を使用しています。
2. リンクボタン内の文字の配置にも display: flex; を使用して中央表示にしています。
3. マウスホバー時の動作として、各ボタンの下にアニメーションをしてラインが表示されます。
4. ホバー時のボタン以外の表示を、否定疑似クラスである :not() を使用し制御しています。

See the Pen 【ボタン】ドロップダウンメニュー by 早稲田電子IT教育センター (@wit-it) on CodePen.

1. 各メニュー項目にホバーすると、子階層用のメニューが表示されます。
2. 親要素であるmenu__parentsを設定した<li>要素内に、子階層表示用の<ul>要素を配置しています。

See the Pen 【ボタン】ナビゲーション5 by 早稲田電子IT教育センター (@wit-it) on CodePen.

1. ナビゲーションのそれぞれの項目の<li>要素に、style属性で変数の設定を行っています。
2. <li>要素につけられた変数の値によって各項目に角度をつけています。
3. ホバー時、ナビゲーションの項目が少し動きます。