Suzuki Blog Written by Yuki Suzuki

ボタンデザイン5選【CSS】

CSS Programming

こんにちは!スズキです。

今回はCSSで制作できる、ボタンデザインを5つ紹介します。

どれもCSSだけでコーディングできます。

初心者の方でも簡単だと思うので、ぜひ試してみてください。

記事の内容

  • パターン1(シンプル)
  • パターン2(押し込み式)
  • パターン3(グラデーション)
  • パターン4(円形)
  • パターン5(ボーダー)

スポンサードサーチ

パターン1(シンプル)

まずはシンプルなパターンです。

よく見る感じですね。

パターン2(押し込み式)

次は押し込みできるパターンです。

クリックすると、押し込むことができます。

スポンサードサーチ

パターン3(グラデーション)

こちらは色がグラデーションになっています。

linear-gradientを利用することで、グラデーションを表現できます。

パターン4(円形)

次は円形のパターンです。

border-radiusを50%に指定することで、円形を表現できます。

スポンサードサーチ

パターン5(ボーダー)

最後はボーダーで囲ったパターンです。

ホバーすると、背景色が変化します。

まとめ

いかがでしたか。

全て簡単なCSSだけで制作できました。

他にも様々なパターンがあるので、調べて自分の引き出しを増やしていきましょう。

以上です。

コーディングを学ぶならデイトラ

Web制作コース

動画でプログラミングを学ぶなら

Udemy

オンラインスクールでプログラミングを学ぶなら

Skill Hacks