CSS〜ボタン〜

先日のスクールの作業時間にボタンを作成したので大したものではないですがせっかくなら記録しておこうと思います。

①四角のボタン
②立体のボタン
③角丸のボタン
④影のあるボタン
⑤ー見出しのタイトルー

●見本

●ボタンのCSS

①〜④は共通部分は全てまとめました。
②ぼかしなしの下だけに影があるので
　0(左右) ＋8px(上下)　暗めピンク(カラー指定)
④左、下にぼかしありなので
　＋5px(左右) ＋5px(上下) 15px(ぼかしの度合い)　黒(カラー指定)

●タイトルのCSS

⑤この見出しの横に線があるスタイルは架空サイトに使った見出しスタイルだったので練習してみました。
　display: flex;　align-items: center;　で横線を中央にもってくる
　flex-grow: 0.05;　で横線を短くする（1で幅いっぱいになる）
　　↑ growをかけることで要素が左端に寄ってしまうので、
　　　justify-content: center;　でセンターにもってくる

●作成ボタンと見出しのタイトル

実際に作成したボタンがこちらです↓

noteに載せるまでもない程度のことでしたが見られることに慣れようと思いまして、、、笑
もう一つはやったことの言語化をすることで理解したつもりにならないようにです。

以上です。ありがとうございました。