【コピペOK】webページでよく使うCSSで作るシンプルなボタン（サンプルコード）

webページ作成時によく使うリンクボタンのコードを紹介します。

HTMLとCSSだけで作るシンプルなボタンです。

ボタンのデザインは結局シンプルなものを使うことが多いので4種類にしぼりました。

コピペしたり必要に応じて修正して使っていただければと思います＾＾

右側の「Result」の画面でプレピューできますので、マウスオーバーやクリックをして動作を確認してみてくださいね。

ホバーすると背景の色が薄くなるボタン

See the Pen MWKbPEa by mar (@mar0978) on CodePen.

ホバーすると下に動くボタン

See the Pen rNxjbqR by mar (@mar0978) on CodePen.

クリックするとボタンを押したみたいにへこむボタン

See the Pen xxZgeeb by mar (@mar0978) on CodePen.

ホバーするとグラデーションするボタン

See the Pen abdpxez by mar (@mar0978) on CodePen.