汎用性のあるボタンデザインをCSSとHTMLのみを使って紹介します。
色を変えたり、角丸ボタンにしたり…
紹介しているボタンを「若干こう変えたい」というときは「この記述を変えるとできる！」とワンポイントアドバイスもしています。
ただただコピペで使うだけではなく、自分好みにアレンジしてお使いになれるように工夫して紹介しています。
10種の使いやすいボタン
基本ぱっと見は、シンプルなボタンです。
しかし、ホバーエフェクトがしっかりしているので、”シンプルだけどおしゃれ、だから使いやすい！”
ホバーで色が変わるボタン
See the Pen
button１ by こんぺいとう꙳ 金平しゅがー (@confeitoblog209)
on CodePen.
・ボタンのリンク先のURLをHTMLの<a href="" class="btn">のhref="●●●●"青の下線部分に記述してください。
・BOTTONの文字色を変えたい場合は、a.btn { }の中のcolor: #fff;のカラーコードをあなたが変えたい色に変えて下さい。
・BOTTONの文字の大きさを変えたい場合は、a.btn { }の中のfont-size: 16px;px数を変えて下さい。
・ボタンの背景の色を変えたい場合は、a.btn { }の中のbackground-color: #000000;のカラーコードをあなたが変えたい色に変えて下さい。
・ホバー後のボタンの背景の色を変えたい場合は、a.btn:hover{ }の中のbackground-color: #000000;のカラーコードをあなたが変えたい色に変えて下さい。
・ボタンの幅を変えたい場合は、a.btn { }の中のwidth:200px;のpx数を変えて下さい。
・ボタンの角をもっと丸くしたい場合は、a.btn { }の中のborder-radius:5px;のpx数を大きくして下さい。逆に四角いボタンにしたい場合は、a.btn { }の中のborder-radius:5px;の記述をなくしてください。
ホバーでボタンと文字色が変わるボタン
See the Pen
button5 by こんぺいとう꙳ 金平しゅがー (@confeitoblog209)
on CodePen.
・ボタンのリンク先のURLをHTMLの<a href="" class="btn">のhref="●●●●"青の下線部分に記述してください。
・BOTTONの文字色を変えたい場合は、a.btn { }の中のcolor: #fff;のカラーコードをあなたが変えたい色に変えて下さい。
・BOTTONの文字の大きさを変えたい場合は、a.btn { }の中のfont-size: 16px;px数を変えて下さい。
・ボタンの背景の色を変えたい場合は、a.btn { }の中のbackground-color: #000000;のカラーコードをあなたが変えたい色に変えて下さい。
・ボタンの幅を変えたい場合は、a.btn { }の中のwidth:200px;のpx数を変えて下さい。
・ボタンの角をもっと丸くしたい場合は、a.btn { }の中のborder-radius:5px;のpx数を大きくして下さい。逆に四角いボタンにしたい場合は、a.btn { }の中のborder-radius:5px;の記述をなくしてください。
・ホバー後のボタンの文字の色を変えたい場合は、a.btn:hover{ }の中のcolor: #D1B1C5;のカラーコードをあなたが変えたい色に変えて下さい。
・ホバー後のボタンの背景の色を変えたい場合は、a.btn:hover{ }の中のbackground-color: #fff;のカラーコードをあなたが変えたい色に変えて下さい。
・ホバー後のボタンの枠線の色を変えたい場合は、a.btn:hover{ }の中のborder-color: #D1B1C5;のカラーコードをあなたが変えたい色に変えて下さい。
ホバーで下にさがるボタン
See the Pen
button2 by こんぺいとう꙳ 金平しゅがー (@confeitoblog209)
on CodePen.
・ボタンのリンク先のURLをHTMLの<a href="" class="btn">のhref="●●●●"青の下線部分に記述してください。
・BOTTONの文字色を変えたい場合は、a.btn { }の中のcolor: #fff;のカラーコードをあなたが変えたい色に変えて下さい。
・BOTTONの文字の大きさを変えたい場合は、a.btn { }の中のfont-size: 16px;px数を変えて下さい。
・ボタンの背景の色を変えたい場合は、a.btn { }の中のbackground-color: #000000;のカラーコードをあなたが変えたい色に変えて下さい。
・ボタンの幅を変えたい場合は、a.btn { }の中のwidth:200px;のpx数を変えて下さい。
・ボタンの角をもっと丸くしたい場合は、a.btn { }の中のborder-radius:5px;のpx数を大きくして下さい。逆に四角いボタンにしたい場合は、a.btn { }の中のborder-radius:5px;の記述をなくしてください。
ホバーで影が動くボタン
See the Pen
button3 by こんぺいとう꙳ 金平しゅがー (@confeitoblog209)
on CodePen.
・ボタンのリンク先のURLをHTMLの<a href="" class="btn">のhref="●●●●"青の下線部分に記述してください。
・BOTTONの文字色を変えたい場合は、a.btn { }の中のcolor: #000;のカラーコードをあなたが変えたい色に変えて下さい。
・BOTTONの文字の大きさを変えたい場合は、a.btn { }の中のfont-size: 16px;のpx数を変えて下さい。
・ボタンの背景の色を変えたい場合は、a.btn { }の中のbackground-color: #000000;のカラーコードをあなたが変えたい色に変えて下さい。
・ボタンの幅を変えたい場合は、a.btn { }の中のwidth:200px;のpx数を変えて下さい。
・ボタンの角をもっと丸くしたい場合は、a.btn { }の中のborder-radius:5px;のpx数を大きくして下さい。逆に四角いボタンにしたい場合は、a.btn { }の中のborder-radius:5px;の記述をなくしてください。
ホバーでボタンの真ん中から色が変わる
See the Pen
button4 by こんぺいとう꙳ 金平しゅがー (@confeitoblog209)
on CodePen.
・ボタンのリンク先のURLをHTMLの<a href="" class="btn">のhref="●●●●"青の下線部分に記述してください。
・BOTTONの文字色を変えたい場合は、a.btn { }の中のcolor: #fff;のカラーコードをあなたが変えたい色に変えて下さい。
・BOTTONの文字の大きさを変えたい場合は、a.btn { }の中のfont-size: 16px;のpx数を変えて下さい。
・ボタンの背景の色を変えたい場合は、a.btn { }の中のbackground-color: #000000;のカラーコードをあなたが変えたい色に変えて下さい。
・ボタンの幅を変えたい場合は、a.btn { }の中のwidth:200px;のpx数を変えて下さい。
・ボタンの角をもっと丸くしたい場合は、a.btn { }の中のborder-radius:5px;のpx数を大きくして下さい。逆に四角いボタンにしたい場合は、a.btn { }の中のborder-radius:5px;の記述をなくしてください。
・ボタンの枠線の太さを変えたい場合は、a.btn { }の中のborder: 2px solid #D1B1C5;のpx数を変えて下さい。
・ホバーで真ん中から色が変わる速さを変えたい場合は、a.btn::before,a.btn::after { }の中のtransition: .3s;の数値を変えて下さい。
ホバーで枠線が破線に変わるボタン
See the Pen
button6 by こんぺいとう꙳ 金平しゅがー (@confeitoblog209)
on CodePen.
・ボタンのリンク先のURLをHTMLの<a href="" class="btn">のhref="●●●●"青の下線部分に記述してください。
・BOTTONの文字色を変えたい場合は、a.btn { }の中のcolor: #fff;のカラーコードをあなたが変えたい色に変えて下さい。
・BOTTONの文字の大きさを変えたい場合は、a.btn { }の中のfont-size: 16px;のpx数を変えて下さい。
・ボタンの背景の色を変えたい場合は、a.btn { }の中のbackground-color: #000000;のカラーコードをあなたが変えたい色に変えて下さい。
・ボタンの幅を変えたい場合は、a.btn { }の中のwidth:200px;のpx数を変えて下さい。
・ボタンの角をもっと丸くしたい場合は、a.btn { }の中のborder-radius:5px;のpx数を大きくして下さい。逆に四角いボタンにしたい場合は、a.btn { }の中のborder-radius:5px;の記述をなくしてください。
・ボタンの枠線の太さを変えたい場合は、border: 2px solid #D1B1C5;のpx数を変えて下さい。
ホバーで背景に色が付き、外に枠線が付くボタン
See the Pen
button7 by こんぺいとう꙳ 金平しゅがー (@confeitoblog209)
on CodePen.
・ボタンのリンク先のURLをHTMLの<a href="" class="btn">のhref="●●●●"青の下線部分に記述してください。
・BOTTONの文字色を変えたい場合は、a.btn { }の中のcolor: #D1B1C5;のカラーコードをあなたが変えたい色に変えて下さい。
・BOTTONの文字の大きさを変えたい場合は、a.btn { }の中のfont-size: 16px;のpx数を変えて下さい。
・ボタンの幅を変えたい場合は、a.btn { }の中のwidth:200px;のpx数を変えて下さい。
・ボタンの枠線の太さを変えたい場合は、a.btn { }の中のborder: 2px solid #D1B1C5;のpx数を変えて下さい。
・ホバーであらわれる外枠のを変えたい場合は、a.btn:before,a.btn:after{ }の中のborder-color: #D1B1C5;のカラーコードをあなたが変えたい色に変えて下さい。
ホバーで動くグラデーションボタン
See the Pen
button8 by こんぺいとう꙳ 金平しゅがー (@confeitoblog209)
on CodePen.
・ボタンのリンク先のURLをHTMLの<a href="" class="btn">のhref="●●●●"青の下線部分に記述してください。
・BOTTONの文字色を変えたい場合は、a.btn { }の中のcolor: #fff;のカラーコードをあなたが変えたい色に変えて下さい。
・BOTTONの文字の大きさを変えたい場合は、a.btn { }の中のfont-size: 16px;のpx数を変えて下さい。
・ボタンの幅を変えたい場合は、a.btn { }の中のwidth:200px;のpx数を変えて下さい。
・ボタンの角をもっと丸くしたい場合は、a.btn { }の中のborder-radius:5px;のpx数を大きくして下さい。逆に四角いボタンにしたい場合は、a.btn { }の中のborder-radius:5px;の記述をなくしてください。
・グラデーションの色を変えたい場合は、a.btn { }の中のbackground-image: linear-gradient(to right, #AE6D98 0%, #D17FB2 33%, #EDBBCF 100%);のカラーコードで変えることができます。
下線があらわれるボタン
See the Pen
button6 by こんぺいとう꙳ 金平しゅがー (@confeitoblog209)
on CodePen.
・ボタンのリンク先のURLをHTMLの<a href="" class="btn">のhref="●●●●"青の下線部分に記述してください。
・BOTTONの文字色を変えたい場合は、a.btn { }の中のcolor:#D1B1C5;のカラーコードをあなたが変えたい色に変えて下さい。
・BOTTONの文字の大きさを変えたい場合は、a.btn { }の中のfont-size: 16px;のpx数を変えて下さい。
・BOTTONに背景を付けたいときは場合は、a.btn { }の中のbackground-color: #◇△◇△◇△;好きなカラーコードを指定し、追記してください。
・ボタンの幅を変えたい場合は、a.btn { }の中のwidth:200px;のpx数を変えて下さい。
・ホバーであらわれる下線の色を変えたい場合は、a.btn::after { }の中のbackground: #D1B1C5;のカラーコードをあなたが変えたい色に変えて下さい。
キラッとひかるボタン
See the Pen
button10 by こんぺいとう꙳ 金平しゅがー (@confeitoblog209)
on CodePen.
・ボタンのリンク先のURLをHTMLの<a href="" class="btn">のhref="●●●●"青の下線部分に記述してください。
・BOTTONの文字色を変えたい場合は、a.btn { }の中のcolor:#FFF;のカラーコードをあなたが変えたい色に変えて下さい。
・BOTTONの文字の大きさを変えたい場合は、a.btn { }の中のfont-size: 16px;のpx数を変えて下さい。
・ボタンの背景の色を変えたい場合は、a.btn { }の中のbackground-color: #EDBBCF;のカラーコードをあなたが変えたい色に変えて下さい。
・ボタンの角をもっと丸くしたい場合は、a.btn { }の中のborder-radius:5px;のpx数を大きくして下さい。逆に四角いボタンにしたい場合は、a.btn { }の中のborder-radius:5px;の記述をなくしてください。
・ボタンの幅を変えたい場合は、a.btn { }の中のwidth:200px;のpx数を変えて下さい。
最後に
文字だけのボタンよりも見た目がいかにも「これは、ボタンだ！」とわかりやすいボタンにすることでクリックしてもらいやすくなります。
今回紹介したボタンは、ホバーというアクションを起こすと動きが出るので見ている人が、「何だろう？」とか「押せる、ボタンなんだ」と認識してもらいやすいです。
微調整ができるように、こうしたい場合はこの記述を変えて下さい。という説明も添えています。
10種類ではありますが、シンプルかつスタイリッシュで汎用性のあるボタンを厳選してご紹介しています、ぜひ使ってみて下さいね。
Webデザインに関する記事