CSSボタンのデザインとホバーエフェクトのアイデア

CSSボタンのデザインとホバーエフェクトのアイデア
CSSのみで実装できるCSSボタンデザインの基本的な作り方と、CSSボタンを作る上で役立つサイトを紹介します。また、CodePenで公開されているCSSボタンのアイデアも厳選してピックアップしましたので参考にしてみてください。





基本的なCSSボタンの作り方



1

<a>タグでのCSSボタン

aタグをブロック要素にしたシンプルなCSSボタンのデザイン例。マウスオーバー:hoverでボタンの背景色を変化させ、変移をスムーズ(なめらか)にアニメーションさせるようにtransitionを設定しました。

html
    <a class="button01" href="#">Button</a>
    
CSS
    .button01{
        display:block;
        width: 250px;
        height:70px;
        line-height: 70px;
        color: #FFF;
        text-decoration: none;
        text-align: center;
        background-color: #f39800; /*ボタン色*/
        border-radius: 5px; /*角丸*/
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
    }
    .button01:hover{
        background-color: #f9c500; /*ボタン色*/
    }
    
    


2

<input>タイプのCSSボタン

フォームで使われるボタンsubmitbuttonのCSSも大体同じ設定。フォームのボタンはボーダーが残るのでborder: none;としてボーダーを消します。

html
    <input type="submit" class="button02" value="CSSボタン">
    
    
CSS
    .button02{
        display:block;
        width: 250px;
        height:70px;
        line-height: 70px;
        color: #FFF;
        text-decoration: none;
        text-align: center;
        background-color: #f39800; /*ボタン色*/
        border-radius: 5px; /*角丸*/
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
    }
    .button02:hover{
        background-color: #f9c500; /*ボタン色*/
    }
    
    



3

立体的なCSSボタン

よくみられるフラットでありながら立体感のあるCSSボタン。クリック(ボタンを押しこむ):active表現を加えたデザイン。

html
    <a class="button03" href="#">Button</a>
    
    
CSS
    .button03{
        display:block;
        width: 250px;
        height:70px;
        line-height: 70px;
        color: #FFF;
        text-decoration: none;
        text-align: center;
        background-color: #f39800; /*ボタン色*/
        border-bottom: solid 6px #ec6c00; /*下線色*/
        border-radius: 5px; /*角丸*/
    }
    .button03:hover{
        background-color: #f9c500;/*ボタン色*/
        border-bottom: solid 6px #f39800; /*下線色*/
    }
    .button03:active {
        margin-top: 6px;
        border-bottom: none;
        -webkit-transform: translateY(6px); /*下移動*/
        transform: translateY(6px);
    }
    
    


4

アイコンフォントを使用したCSSボタン

③のボタンにアイコンフォント「FontAwesome」をテキスト文頭に配置したCSSボタン。簡単にCSSのみでデザインされたボタンを作成できます。

html
    <a class="button04" ><i class="fa-solid fa-circle-chevron-right"></i> CSSボタン</a>
    
    
CSS
    .button04{
        display:block;
        width: 250px;
        height:70px;
        line-height: 70px;
        color: #FFF;
        text-decoration: none;
        text-align: center;
        background-color: #f39800; /*ボタン色*/
        border-bottom: solid 6px #ec6c00; /*下線色*/
        border-radius: 5px; /*角丸*/
    }
    .button04:hover{
        background-color: #f9c500;/*ボタン色*/
        border-bottom: solid 6px #f39800; /*下線色*/
    }
    .button04:active {
        margin-top: 6px;
        border-bottom: none;
        -webkit-transform: translateY(6px); /*下移動*/
        transform: translateY(6px);
    }
    
    

FontAwesomeの使い方については関連記事をご覧ください。

アイコンフォント「FontAwesome」の使い方

design.webclips.jp/fontawesome-how-to-use/




CSSボタンの制作で役立つサイト


チュートリアルやライブラリ・スニペットなどでCSSボタンを設置することができます。ここでは、codropsでのCSSボタンのチュートリアル3点と、簡単に設置できるCSSライブラリを紹介します。


1

Creative Button Styles

Creative Button Styles

codropsで公開されている、モダンなCSSボタンのアイデア。2013年に公開された記事ですが、今なおキレイなボタン・ホバーエフェクトが多い。

2

Button Styles Inspiration

Button Styles Inspiration

codropsで公開されているCSSボタンスタイルのチュートリアル。テキストエフェクトやアイコンをうまく利用した魅力的なホバーエフェクトが多い。

3

CSS Button Hover Styles

CSS Button Hover Styles

codropsで公開されているCSSボタンスタイルのチュートリアル。背景の動きや、SVGを使用したホバーエフェクトアニメーションのCSSボタンが見つけられる。

4

UI Buttons

UI Buttons

100種類の様々なスタイルのCSSボタンがコレクションされてます。各CSSボタンの詳細ページからhtml・CSSをコピーすることができます。

5

cssbuttons.app

cssbuttons.app

63種類のシンプルなスタイルのCSSボタンコレクション。各CSSボタンの詳細ページからhtml・CSSをコピーすることができます。

6

Bttn.css

Bttn.css

13種類・4サイズから選択できるCSSライブラリ。シンプルなCSSボタンのスタイルが揃っています。

7

CSS Scan

CSS Scan

シンプルなボタンからグラデーションのボタンまで、84種類のCSSボタンがコレクションされています。各ボタンをクリックするとhtml・CSSがコピーされます。

8

Hover.css

Hover.css

CSSボタンに手軽にhoverエフェクトを実装することができるCSSライブラリ。ライセンスはMIT。

9

Buttons

Buttons

6タイプ・6色のフラットから立体的なボタンまで設置できるライブラリ。Font Awesomeを読み込むことでアイコン付きボタンも比較的簡単に設置できます。

10

Annimay

Annimay

CSSボタンなどに適用できる軽量なホバーアニメーションのコレクション。SCSS・CSS・LESSでの利用も可能。

11

TailwindCSS Buttons

TailwindCSS Buttons

Tailwindフレームワークに対応したユニークなCSSボタンコレクション。「Copy」ボタンをクリックするとソースをコピーすることができます。



CSSボタン制作のアイデア


コードコミュニティサイトCodepenで公開しているCSSボタンのホバーエフェクトのアイデアから気になったデザインをピックアップしました。CSSボタン制作時に参考にしてみてください。


20 Button Hover Effects

ベーシックなものからフラップ・シャドーまで実用的なスタイルのCSSボタン

See the Pen 20 Button Hover Effects by Rosa (@RRoberts) on CodePen.

Six Pure CSS Button Hover Animations

ボーダーと背景を入れ替えるアニメーションのCSSボタン

See the Pen Six Pure CSS Button Hover Animations by Christian (@CTNieves) on CodePen.

Collection of Button Hover Effects

ホバーエフェクトに工夫を凝らしたCSSボタン

See the Pen Collection of Button Hover Effects by David Conner (@davidicus) on CodePen.

Amy Winehouse Doc Button

ブロックが左右にスライドするクールなCSSボタン

See the Pen Amy Winehouse Doc Button by Eric Grucza (@egrucza) on CodePen.

Blobs button

液状の背景が浮き上がっていくポップなCSSボタン

See the Pen Blobs button by Nikolay Talanov (@suez) on CodePen.

CSS3 Social buttons vol.1

5タイプのバリエーションのホバーエフェクトのアイデア

See the Pen CSS3 Social buttons vol.1 by foxeisen (@foxeisen) on CodePen.

Gradient Buttons with Background-Color Change

グラデーションに変化をつけたホバーエフェクトのアイデア

See the Pen Gradient Buttons with Background-Color Change (CSS-only) by MrPirrera (@pirrera) on CodePen.

Animated hover button

カーソルがボタンの領域に入った座標からバブルのアニメーションが広がるボタンデザイン。【JavaScript使用】

See the Pen Animated hover button by Sammy Helali (@Lunoware) on CodePen.

Magnetic button animation

カーソルがボタンに近づくとボタンが磁石に吸着しようとするエフェクトが魅力的なボタン。【JavaScript使用】

See the Pen Magnetic button animation by Milan Raring (@milanraring) on CodePen.

MAGNETIC BUTTONS

カーソルがボタンに近づくとボタンが磁石に吸着しようとするエフェクトの円形ボタン。【JavaScript使用】

See the Pen MAGNETIC BUTTONS by ArtemTsivilev (@artemtsivilev) on CodePen.

Arrowed link circle on hover

SVGパスと破線を使用して表現したサークル状の矢印のアニメーションが特徴的なボタン。

See the Pen Arrowed link – circle on hover (cf Google Home website) by Alex Jolly (@SachaJolly) on CodePen.

SVG Circle button animation

ラインアニメーションが特徴的なサークル状のCSSボタン。

See the Pen SVG Circle button animation – CSS Only by Makio64 (@Makio64) on CodePen.

Animated Arrow Button

ホバー時に矢印の形状が変化するCSSボタン

See the Pen Animated Arrow Button – SVG Chevron to Arrow CSS Animation – New Stripe Button by Travis Williamson (@travisw) on CodePen.

Button Hover Effects

split textで1文字づつspanで囲みアニメーションを付けたオシャレなボタン。【JavaScript使用】

See the Pen Button Hover Effects by Aaron Iker (@aaroniker) on CodePen.

Button Hover Effects #2

split textで1文字づつspanで囲みアニメーションを付けたオシャレなボタン。【JavaScript使用】

See the Pen Button Hover Effects #2 by Aaron Iker (@aaroniker) on CodePen.

Button Hover

先頭の矢印アイコンの背景が広がりボタンの形状に変化する実用性の高いCSSボタン。

See the Pen Button Hover by Katherine Kato (@kathykato) on CodePen.

CSS Favourite Button

円形のボタンから横長に変化するCSSボタン。

See the Pen CSS Favourite Button by Jamie Coulter (@jcoulterdesign) on CodePen.

Pure CSS Cyberpunk 2077 Buttons

グリッチを効かせたサイバーパンク風のCSSボタン。

See the Pen Pure CSS Cyberpunk 2077 Buttons 😎 by Jhey (@jh3y) on CodePen.

Button Animation Space

点滅とぼかしを活かした未来的なクールなCSSボタン。

See the Pen Button Animation Space by Reza Ardi (@rezaardi) on CodePen.

そのほかに、Webサイト上で手軽にCSSボタンを作成できるジェネレーターもありますので合わせてチェック↓してみてください。

コピペするだけで使えるCSSボタンジェネレーターまとめ

design.webclips.jp/css-button-generator/



\ Webデザインに関するお役立ち情報を定期的に配信中 /

Follow @webclips_jp

POPULAR POSTS
  • 無料で使えるフリーイラスト素材サイト45選(商用利用可)
  • 漢字が使える日本語フリーフォント93選(商用利用可)
  • 無料で使える日本語・英語のかわいいフリーフォント20選
  • フォントを調べる時に役に立つツール・サイト10選
  • 無料で使えるデジタル風フォント13選
  • 無料で使用できるフリー動画素材・映像素材サイト15選
WordPress対応! 初心者におすすめのレンタルサーバー特集
  • Webデザイン
  • グラフィックデザイン
  • フリー素材
  • WordPress
  • レンタルサーバー
  • Photoshop
  • Webサービス