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

2022/11/08 2022/11/21

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

目　次

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

<a>タグでのCSSボタン
<input>タイプのCSSボタン
立体的なCSSボタン
アイコンフォントを使用したCSSボタン

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

Creative Button Styles
Button Styles Inspiration
CSS Button Hover Styles
UI Buttons
cssbuttons.app
Bttn.css
CSS Scan
Hover.css
Buttons
Annimay
TailwindCSS Buttons

CSSボタン制作のアイデア

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

<a>タグでのCSSボタン

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

CSSボタン

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; /*ボタン色*/
    }

<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; /*ボタン色*/
    }

立体的なCSSボタン

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

CSSボタン

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);
    }

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

③のボタンにアイコンフォント「FontAwesome」をテキスト文頭に配置したCSSボタン。簡単に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の使い方については関連記事をご覧ください。