ボタン

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 【ボタン】5 by 早稲田電子IT教育センター (@wit-it) on CodePen.

1. 中央に絵文字を配置しています。閲覧環境や使用フォントによって表示が変わる可能性があることに注意してください。
2. ボタンの立体感は box-shadow 、絵文字の窪んでいるような表現は text-shadow で設定しています。