CSSでボタンなどの素材を作ってみた【コピペOK】

こんにちは朱夏です。

今回はCSSで今まで学んできたことのアウトプットとして、ボタンや吹き出しなどの素材を作っていきたいと思います。

もし需要があれば好きに使っていただいて問題ないです。

それではいきましょう。

▽ボタン

See the Pen
gOpeOWL by 朱夏 (@syunatsu1)
on CodePen.

ドロップダウンメニュー等にどうぞ。

ハンバーガーメニューボタン

See the Pen
mdJxydM by 朱夏 (@syunatsu1)
on CodePen.

スマホ用のメニューボタンですね。

↑ボタン

See the Pen
MWwVYmg by 朱夏 (@syunatsu1)
on CodePen.

Topに戻る時などに使えそうです。

立体ボタン

See the Pen
NWqYqKK by 朱夏 (@syunatsu1)
on CodePen.

無駄に凸凹にしてみました。

吹き出し

See the Pen
ZEGxGOL by 朱夏 (@syunatsu1)
on CodePen.

吹き出し型のコメント用です。

あとがき

というわけで、ボタンなどの素材を作ってみました。
学習を始めた頃の私は、webサイトを作成する上で曲線的なものや斜めになっているものは難易度の高い表現だったのですが、最近は自由度が増してきました。

今回はここまでです。
次回もよろしくお願いします。