ボタン/リンク

2022.01.20

シンプルなボタンのアイデアまとめ

フォームの送信ボタンやリンク用など、サイト内で使えるシンプルなボタンのアイデアをまとめてみました。
CSSだけでできる動きのアイデアも入れているので、ぜひご活用ください!

枠線がついたボタン(ホバーで薄くなるVer)

一番シンプルな枠線が付いただけのボタン。
transitionを指定することでふわっと切り替わるボタンにすることもできます。

枠線がついたボタン(ホバーで色が反転するVer)

先ほどのボタンと同じデザインでも、ホバー時に色が反転すると選択しているボタンがわかりやすくなります。

シャドウがついたボタン

シャドウをつけると少し立体的なボタンにすることができます。

角丸のボタン

border-radiusを指定することで角丸のボタンにすることができます。
角丸ボタンにするとき、下記の注意点があります。

  • backgroundborderなどの指定と同じタグにborder-radiusの指定をしないとうまく角丸にならない。
  • aタグやbuttonタグなど、ボタンになる要素の外側のタグに指定してしまうと角丸の外側も押せる状態になってしまうこともある。

関連記事

  • 2021.12.27

    シンプルな見出しのアイデアまとめ

  • 2022.02.09

    テキストリンクのアレンジまとめ

  • 2022.01.20

    シンプルなボタンのアイデアまとめ

  • 2022.01.13

    シンプルなリストのアイデアまとめ

KEY WORD

WPサービス

×