フリーランス｜WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

HOME
BLOG
【コピペOK】WEBデザインで使えるシンプルなボタンデザイン18選

【コピペOK】WEBデザインで使えるシンプルなボタンデザイン18選

css
HTML
Webデザイン
コピペ
デザイン
ボタン

コピペですぐに使えるCSSで作るの使い勝手抜群なシンプルなボタンデザインを18種類集めてみました。

なお、ボタンにマウスホバーした時のアニメーションは以下の記事でご紹介しています。

【コピペOK】ボタンにホバーした時のCSSアニメーション15選

CSSで作るボタンのHTML構造

この記事で紹介しているCSSで作るボタンは全て以下のHTMLがベースになっています。

<a href="#" class="button">もっと見る</a>

単色ボタン

単色ボタンのサンプルを集めてみました。

シンプルな単色ボタン

シンプルな単色ボタンの場合のCSSサンプルはこちら。

.button{
    width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: #dc5a45;
    color: #fff;
    text-decoration: none;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

角丸な単色ボタン

角丸な単色ボタン場合のCSSサンプルはこちら。

.button{
    width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: #dc5a45;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

角が完全に丸い単色ボタン

角が完全に丸い単色ボタンの場合のCSSサンプルはこちら。

.button{
    width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: #dc5a45;
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

ボーダー・縁取りのボタン

ボーダー・縁取りのボタンのサンプルを集めてみました。

シンプルなボーダー・縁取りのボタン

シンプルなボーダー・縁取りのボタンの場合のCSSサンプルはこちら。

.button{
    width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 2px solid #e8c72e;
    color: #e8c72e;
    text-decoration: none;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

角丸なボーダー・縁取りのボタン

角丸なボーダー・縁取りのボタンの場合のCSSサンプルはこちら。

.button{
    width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 2px solid #e8c72e;
    color: #e8c72e;
    text-decoration: none;
    border-radius: 5px;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

角が完全に丸いボーダー・縁取りのボタン

角が完全に丸いボーダー・縁取りのボタンの場合のCSSサンプルはこちら。

.button{
    width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 2px solid #e8c72e;
    color: #e8c72e;
    text-decoration: none;
    border-radius: 25px;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

グラデーションボタン

グラデーションボタンのサンプルを集めてみました。

シンプルなグラデーションボタン

シンプルなグラデーションボタンの場合のCSSサンプルはこちら。

.button{
    width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: linear-gradient(90deg, rgba(220,90,69,1) 0%, rgba(232,199,46,1) 100%);
    color: #fff;
    text-decoration: none;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

角丸なグラデーションボタン

角丸なグラデーションボタンの場合のCSSサンプルはこちら。

.button{
    width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: linear-gradient(90deg, rgba(220,90,69,1) 0%, rgba(232,199,46,1) 100%);
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

角が完全に丸いグラデーションボタン

角が完全に丸いグラデーションボタンの場合のCSSサンプルはこちら。

.button{
    width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: linear-gradient(90deg, rgba(220,90,69,1) 0%, rgba(232,199,46,1) 100%);
    color: #fff;
    border-radius: 25px;
    text-decoration: none;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

矢印アイコン付きのボタン

矢印アイコン付きのボタンのサンプルを集めてみました。

単色でシンプルな矢印アイコン付きのボタン

単色でシンプルな矢印アイコン付きのボタンの場合のCSSサンプルはこちら。

.button{
    width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: #3d8582;
    color: #fff;
    text-decoration: none;
}
.button::after{
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    margin-left: 15px;
    background: url(https://irodori-design-web.com/blog_image/3000/icon_arrow.svg) no-repeat center center / contain;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

角丸ボーダー・縁取りで矢印アイコン付きのボタン

角丸ボーダー・縁取りで矢印アイコン付きのボタンの場合のCSSサンプルはこちら。

.button{
    width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 2px solid #dc5a45;
    color: #dc5a45;
    text-decoration: none;
    border-radius: 5px;
}
.button::after{
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    margin-left: 15px;
    background: url(https://irodori-design-web.com/blog_image/3000/icon_arrow-red.svg) no-repeat center center / contain;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

角が完全に丸くて矢印アイコン付きのボタン

角が完全に丸くて矢印アイコン付きのボタンの場合のCSSサンプルはこちら。

.button{
    width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: linear-gradient(90deg, rgba(220,90,69,1) 0%, rgba(232,199,46,1) 100%);
    color: #fff;
    border-radius: 25px;
    text-decoration: none;
}
.button::after{
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    margin-left: 15px;
    background: url(https://irodori-design-web.com/blog_image/3000/icon_arrow.svg) no-repeat center center / contain;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

デザイン性のあるボタン

ここからはデザイン性のある少し変わったボタンのサンプルを集めてみました。

立体的なボタン

立体的なボタンの場合のCSSサンプルはこちら。

.button{
    width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: #dc5a45;
    border-bottom: 3px solid #8f3a2c;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

二重線のボタン

二重線のボタンなボタンの場合のCSSサンプルはこちら。

.button{
    width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 2px solid #e8c72e;
    color: #e8c72e;
    text-decoration: none;
    position: relative;
}
.button::before{
    content: "";
    display: block;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid #e8c72e;
    transform: translate(-50%,-50%);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

破線のボタン

破線のボタンの場合のCSSサンプルはこちら。

.button{
    width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: #3d8582;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    border: 2px dashed #000;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

アメコミ風なボタン

アメコミ風なボタンの場合のCSSサンプルはこちら。

.button{
    width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: #e8c72e;
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    border: 2px solid #000;
    position: relative;
}
.button::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: calc(100% + 4px);
    height: 100%;
    box-sizing: border-box;
    border: 2px solid #000;
    border-radius: inherit;
    background: #ccc100;
    z-index: -1;
    transform: translate3d(-2px,10px,-10px);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

飾り付きのボタン

飾り付きのボタンの場合のCSSサンプルはこちら。

.button{
    width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: #e8c72e;
    color: #fff;
    text-decoration: none;
    position: relative;
}
.button::before{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 0;
    border-color: #dc5a45 transparent transparent transparent;
    position: absolute;
    left: 0;
    top: 0;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

線から離れた影付きのボタン

線から離れた影付きのボタンの場合のCSSサンプルはこちら。

.button{
    width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 3px solid #000;
    border-radius: 5px;
    color: #000;
    text-decoration: none;
    position: relative;
}
.button::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    position: absolute;
    left: 6px;
    top: 6px;
    z-index: -1;
    background: #e8c72e;
    box-sizing: border-box;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

まとめ

いかがでしたか？
HTMLとCSSだけで色んなボタンを作ることが出来ますね。
迷った時の参考になれば幸いです。

関連記事一覧

【テクニック】CSSで半円・縁取り・弧を作る方法
【テクニック】CSSで半円・縁取り・弧を作る方法

CSSは様々な形を作ることが出来ます。正円はもちろん、半円、縁取りの半円、半円の弧の部分などデザイナーが作るデザインに合 […]
【コピペOK】ボタンにホバーした時のCSSアニメーション15選
【コピペOK】ボタンにホバーした時のCSSアニメーション15選

ボタンにホバーした時のアニメーションがいつも同じになっているコーダーも多いのではないでしょうか。デザイナーからホバーした […]
【CSS】object-fitで縦横比を保ち画像をトリミングする方法
【CSS】object-fitで縦横比を保ち画像をトリミングする方法

画像の縦横比を保ち画像をトリミングするためのobject-fitプロパティ。この記事ではobject-fitプロパティの […]
【アニメーション】テキストにホバーした時のCSSサンプルコード10選
【アニメーション】テキストにホバーした時のCSSサンプルコード10選

Webサイトのテキストリンク部分はマウスホバーした時、何かしらアニメーションを付けることが多いですね。アニメーションを設 […]
【CSS】z-indexが効かない時の原因と解決方法
【CSS】z-indexが効かない時の原因と解決方法

CSSのプロパティのひとつ「z-index」。このプロパティは要素同士の重なり順を指定する場合に使用します。基本的に数値 […]
【CSS】各プロパティの初期値一覧
【CSS】各プロパティの初期値一覧

CSSを使用している際、プロパティの値を初期値に戻したいと思うことが多々あります。このプロパティの初期値って何だったかな […]
【コピペOK】画像にホバーした時のCSSアニメーション20選
【コピペOK】画像にホバーした時のCSSアニメーション20選

Webサイトにはブログのサムネイル画像等、画像にリンク設定することがよくありますね。デザイナーからホバーアニメーションが […]
【CSS】filterプロパティを使って画像を加工する方法
【CSS】filterプロパティを使って画像を加工する方法

画像をぼかしたりグレースケールにしたり彩度を上げたり、何かしら画像を加工したい場合、PhotoShopなどの画像加工ソフ […]
【コピペOK】HTMLとCSS​で作る図形：サンプルコード集
【コピペOK】HTMLとCSS​で作る図形：サンプルコード集

WEBサイトを作成していると様々な形状の要素を作成することになりますよね。画像として作成してしまえば簡単ですWEBサイト […]
【jQuery】横幅と高さを取得する方法／width()・height()
【jQuery】横幅と高さを取得する方法／width()・height()

jQueryを使用して要素の横幅や高さを取得するメソッドはいくつも存在しています。使用するメソッドによって取得出来る値は […]
【CSS】borderプロパティで枠線を引く方法
【CSS】borderプロパティで枠線を引く方法

WEBサイトで枠線を付けるborderプロパティ。borderプロパティには線の太さ、種類、色を指定することが出来ます。 […]
【コピペ】CSSのclip-pathで色んな図形に切り抜く／サンプルコード
【コピペ】CSSのclip-pathで色んな図形に切り抜く／サンプルコード

CSSのclip-pathプロパティを使うことで要素の表示範囲を定義するために使用されます。要素の可視部分を特定の形状に […]