ボタンを実装する上でUX/UI上重要な3つのポイント
ボタンのデザインでボタンのデザインでユーザーのことを考えて大切にしてことがあります。
1、サイズは適切か
スマホの時サイズが小さすぎるとタップできません。 縦横のサイズが44px以上（Googleの推奨サイズ）というのが鉄板です。
2、クリックできそうか
デザインとしてクリックできそうか、がポイントです。
形としてボタンっぽかったらなおわかりやすいかと思います。
よくあるボタンデザインがこんな感じです。
たとえばこんなオレンジのボタンがあるとします。
※ コンバージョン率が高いと言われているのであえてオレンジを使っています。
アイコン、文字をのせたらもうボタンって何と無くわかりますよね？
ユーザーに「なんかクリックできそう」って思わせるのがポイントです。
3、他のパーツと差別化できているか
ウェブサイトではとくにCVボタンなどであれば、クリックされる事が重要なポイント。
他のパーツ（コンテンツ）との差別化をしっかりしておく必要があります。
ベーシックなボタンのコード3つ
まずはベーシックなボタンのコードをご紹介します。
この3つレパートリーを持っていればとりあえずどうにかなります。多分。
よくある続きを読むボタンですね。
今回右に配置したアイコンは「Material Design Iconic Font」を使っています。
Flexを使って、文字とアイコンを縦横均等に配置してます。
pointer-events の使い方と使いどころ
パーツでいえばページネーションや、COMING SOONにしてリンクが貼れないバナーなどに使うことが多めです。
CMSから吐き出すタグを自分では書き換えられないけどCSS側でクリックを禁止したい、などのケースで重宝します。
ホバーで半透明
<!-- HTML -->
<a href="" class="btn--basic">続きを読む<i class="zmdi zmdi-chevron-right"></i></a>/* CSS */
a[class^=btn] { //btnから始まるクラス
background: #FF9258;
display: flex;
width: 150px;
height: 50px;
border-radius: 5px;
justify-content: space-evenly;
align-items: center;
color: #fff;
text-decoration: none;
}
.btn--basic:hover {
opacity: 0.7;
}色が反転
ホバーすると、ボーダーが反転します。
他のボタンとサイズを合わせるためにbox-sizing: border-box;でborderを内側に含めています。
<!-- HTML -->
<a href="" class="btn--border">続きを読む<i class="zmdi zmdi-chevron-right"></i></a>/* CSS */
.btn--border {
height: 46px;
background: #FF9258;
display: flex;
width: 150px;
border-radius: 5px;
justify-content: space-evenly;
align-items: center;
color: #fff;
text-decoration: none;
transition: .3s;
border: 2px solid #FF9258;
}
.btn--border:hover {
background: #fff;
color: #FF9258;
}定番の立体感のあるボタンらしいボタン
定番のボタンらしいボタンを作るとき、私はかならずY軸に向かったbox-shadowを使います。
クリックしたとき、押した感が出るようにtransformYで位置をわずかに下げ、さらにbox-shadowも同じ分量減らします。
これで不自然な挙動をしないボタンらしいボタンの完成です。
<!-- HTML -->
<a href="" class="btn--button">続きを読む<i class="zmdi zmdi-chevron-right"></i></a>/* CSS */
.btn--button {
position: relative;
height: 50px;
background: #FF9258;
display: flex;
width: 150px;
border-radius: 5px;
justify-content: space-evenly;
align-items: center;
color: #fff;
text-decoration: none;
transition: .3s;
box-shadow: 0 4px 0 #B45624;
}
.btn--button:hover {
transform: translateY(2px);
box-shadow: 0 2px 0 #B45624;
}CSSセレクターこんな指定の仕方もあるよ！
私、コードが減るという理由で時折トリッキー？な指定方法を使います。参考までに。
クラスの前方一致
セレクタ名[class^=btn]
ある文字列から始まるクラスのみを指定できます。この場合btnほにゃららといった感じですね。
クラスの後方一致
セレクタ名[class$=btn]
逆に後方一致だとこんな書き方ができます。
部分一致
セレクタ名[*=btn]
btnが含まれるか否か
ボタンのCSSコード・スニペット
いくらかわいい、かっこいいと思えてもそのデザイン普通使えないと意味がありませんよね？ 実戦で使えそうなものだけピックしてご紹介します。
スケルトンボタン・ベースから応用まで
背景が黒っぽい場合にスケルトンボタンってかっこいいです。
濃いめのグラデの上に乗っけるのもオススメです。
ベースのスケルトン、クリアソープのようなスケルトン、ネオンのようなスケルトン3つのコードスニペットを作ってみました。
今回のポイントはrgba関数です。
半透明の白は濃いめの背景のデザインを生かせるのでオススメです。
文字サイズが小さいと見えないので注意です。
rgba関数
指定方法: rgba(255, 255, 255, .3)
- r 赤(0 - 255)
- g 緑(0 - 255)
- b 青(0 - 255)
- a alpha(0 - 1)
RGBカラーモデルのred・green・blueに、alphaが加わったものです。
rgbは数値が高いほど純色となります。aが0だと透明で1に近づくにつれ不透明となります。
ベースのスケルトン
背景を半透明にしただけで、クリックとともに白っぽさが増します。
<!-- HTML -->
<a href="" class="btn--skeleton">BUTTON</a>/* CSS */
.btn--skeleton {
background: rgba(255, 255, 255, .2);
display: flex;
width: 180px;
height: 60px;
font-size: 1.6rem;
justify-content: space-evenly;
align-items: center;
color: #fff;
text-decoration: none;
transition: .3s;
border: 1px solid #fff;
}
.btn--skeleton:hover {
background: rgba(255, 255, 255, .5);
}クリアソープのようなスケルトンボタン
クリアソープのように少し立体感をつけてみました。
box-shadowをinsetにして立体感をつけています。
<!-- HTML -->
<a href="" class="btn--skeleton2">BUTTON</a>/* CSS */
.btn--skeleton3 {
background: rgba(255, 255, 255, .1);
display: flex;
width: 180px;
height: 60px;
font-size: 1.6rem;
border-radius: 5px;
justify-content: center;
align-items: center;
letter-spacing: .1em;
color: #E5FF1D;
text-shadow: 0 0 3px rgba(255, 255, 255, .8);
text-decoration: none;
transition: .3s;
box-shadow: inset 0 0 6px #E5FF1D, 0 0 6px #E5FF1D;
}
.btn--skeleton3:hover {
color: #E5FF1D;
background: transparent;
text-shadow: 0 0 2px #E5FF1D, 0 0 3px #E5FF1D;
box-shadow: inset 0 0 4px #E5FF1D, inset 0 0 8px #E5FF1D, 0 0 4px #E5FF1D, 0 0 8px #E5FF1D;
}ネオンのようなスケルトンボタン
ボーダーをbox-shadowだけで作って、ライトのようにしています。
<!-- HTML -->
<a href="" class="btn--skeleton3">BUTTON</a>/* CSS */
.btn--skeleton3 {
background: rgba(255, 255, 255, .1);
display: flex;
width: 180px;
height: 60px;
font-size: 1.6rem;
border-radius: 5px;
justify-content: center;
align-items: center;
letter-spacing: .1em;
color: #E5FF1D;
text-shadow: 0 0 3px rgba(255, 255, 255, .8);
text-decoration: none;
transition: .3s;
box-shadow: inset 0 0 6px #E5FF1D, 0 0 6px #E5FF1D;
}
.btn--skeleton3:hover {
color: #E5FF1D;
background: transparent;
text-shadow: 0 0 2px #E5FF1D, 0 0 3px #E5FF1D;
box-shadow: inset 0 0 4px #E5FF1D, inset 0 0 8px #E5FF1D, 0 0 4px #E5FF1D, 0 0 8px #E5FF1D;
}グラデーションを利用したボタン
グラデーションはアニメーションが滑らかに行われないのが難点です。
なので、beforeなどで1個要素を作って移動などアニメーションをさせます。
ここでのポイントがz-indexです。
擬似要素を文字の下にもぐりこませないと、字が見えないのでz-indexを使って要素の順番を入れ替えます。
- 親要素 z-index: 1
- 擬似要素 z-index: -1
今回グラデーションを作るのに使ったのはこのジェネレーターです。 CSS Gradient
グラデーション反転
あらかじめグラデーションを逆にした擬似要素をopacity:0で隠しておき、ホバー時に表示させグラデーションを反転させます。
<!-- HTML -->
<a href="" class="btn--gradient">BUTTON</a>/* CSS */
.btn--gradient {
z-index: 1;
display: flex;
width: 150px;
height: 50px;
justify-content: space-evenly;
align-items: center;
color: #fff;
font-weight: bold;
border-radius: 5px;
text-decoration: none;
position: relative;
background: rgb(238,198,139);
background: linear-gradient(0deg, rgba(238,198,139,1) 0%, rgba(194,91,24,1) 100%);
letter-spacing: .2em;
text-shadow: 0 1px 2px #c25b18;
box-shadow: 0 3px 0 #c25b18;
transition: .3s;
}
.btn--gradient:hover{
transform: translateY(1px);
text-shadow: 0 -1px 2px #c25b18;
box-shadow: 0 2px 0 #a44d15;
}
.btn--gradient::before {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: -1;
border-radius: 5px;
background: linear-gradient(0deg, rgba(194,91,24,1) 0%, rgba(238,198,139,1) 100%);
opacity: 0;
transition: .3s;
}
.btn--gradient:hover::before {
opacity: 1;
}グラデーションが横にスライド
擬似要素を2倍（200%）のサイズに作り、overflow: hiddenで隠しておきます。
hoverした時にleft: -100%でアニメーションさせます。
<!-- HTML -->
<a href="" class="btn--gradient2">BUTTON<i class="zmdi zmdi-chevron-right"></i></a>/* CSS */
.btn--gradient2 {
z-index: 1;
display: flex;
width: 150px;
height: 50px;
justify-content: space-evenly;
align-items: center;
color: #184dc2;
text-decoration: none;
position: relative;
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
overflow: hidden;
}
.btn--gradient2::before {
content: '';
display: block;
width: 200%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: -1;
background: rgb(139,238,145);
background: linear-gradient(45deg, rgba(139,238,145,1) 0%, rgba(109,199,255,1) 100%);
transition: .3s;
}
.btn--gradient2 i {
text-shadow: 0 0 0 transparent;
transition: .3s;
}
.btn--gradient2:hover i {
transform: translateX(3px)
}
.btn--gradient2:hover i {
text-shadow: 4px 0 0 #184dc2, 8px 0 0 #184dc2;
}
.btn--gradient2:hover::before {
left: -100%;
}きっちりセパレートさせた色でアニメーション
私のこのブログのデザインにも使っている左上のマークがスライドするボタンです。
ポイントはグラデの角度を315度の斜めにし左右の色をそれぞれ50%に設定します。
あとは先ほどのグラデーション横にスライドのようにアニメーションさせるだけです。
<!-- HTML -->
<a href="" class="btn--gradient3">BUTTON</a>/* CSS */
.btn--gradient3 {
z-index: 1;
display: flex;
width: 150px;
height: 50px;
justify-content: center;
align-items: center;
color: #fff;
font-weight: bold;
border-radius: 5px;
text-decoration: none;
position: relative;
border: 1px solid #211b71 ;
letter-spacing: .2em;
overflow: hidden;
transition: .3s;
}
.btn--gradient3::before {
content: '';
display: block;
width: 200%;
height: 100%;
position: absolute;
left: -100%;
top: 0;
z-index: -1;
background: rgb(33,27,113);
background: linear-gradient(315deg, rgba(33,27,113,1) 50%, rgba(254,255,251,1) 50%);
transition: .3s;
}
.btn--gradient3:hover {
color: #211b71;
}
.btn--gradient3:hover::before {
left: 0;
}その他よりインタラクティブなボタン
その他型押しのような文字のボタン、shadowを利用したクールなボタン、マウスオーバーすると波紋が広がるボタンなど作ってみました。
文字がエンボス
text-shadowとbox-shadowでエンボス風のボタンです。
<!-- HTML -->
<a href="" class="btn--emboss">BUTTON</a>/* CSS */
.btn--emboss {
display: flex;
width: 180px;
height: 70px;
justify-content: center;
align-items: center;
color: #de7fb5;
font-weight: bold;
border-radius: 10px;
font-size: 20px;
text-decoration: none;
position: relative;
text-shadow: 2px 2px 2px #c8428f, -2px -2px 2px #f2c4df;
background: #cb69a2;
letter-spacing: .2em;
box-shadow: inset 2px 2px 3px #f2c4df, inset -2px -2px 2px #c8428f, 0 0 10px rgba(0, 0, 0, .3);
transition: .3s;
}
.btn--emboss:hover {
background: #c15795;
color: #cb69a2;
text-shadow: 2px 2px 2px #c8428f, -2px -2px 2px #ecaed2;
}パキッとした影が広がるボタン
box-shadowを2個重ねるだけで、クールなボタンができます。
<!-- HTML -->
<a href="" class="btn--shadow">BUTTON</a>/* CSS */
.btn--shadow {
display: flex;
width: 180px;
height: 70px;
justify-content: center;
align-items: center;
color: #333;
font-weight: bold;
font-size: 20px;
background: #fff;
text-decoration: none;
border: 3px solid #333;
transition: .3s;
}
.btn--shadow:hover {
background: #333;
color: #fff;
border: 3px solid #fff;
box-shadow: 6px 6px 0 #333, -6px -6px 0 #333;
}クリックすると波紋が広がるボタン
クリックすると波紋が広がります。
<!-- HTML -->
<a href="" class="btn--bubble">BUTTON</a>/* CSS */
.btn--bubble {
z-index: 1;
display: flex;
width: 180px;
height: 70px;
justify-content: center;
align-items: center;
color: #fff;
letter-spacing: .2em;
font-weight: bold;
border-radius: 5px;
font-size: 20px;
text-decoration: none;
background: rgb(105,147,203);
background: linear-gradient(0deg, rgba(105,147,203,1) 0%, rgba(97,110,213,1) 100%);
overflow: hidden;
position: relative;
}
.btn--bubble::before {
content: '';
height: 25px;
width: 25px;
left: calc(50% - 12px);
bottom: calc(50% - 12px);
border-radius: 50%;
display: block;
background: rgb(255,255,255);
background: radial-gradient(circle, rgba(255,255,255, 0) 0%, rgba(255,255,255,.5) 100%);
opacity: 0;
position: absolute;
}
.btn--bubble::after {
position: absolute;
content: '';
height: 25px;
width: 25px;
left: calc(50% - 12px);
bottom: calc(50% - 12px);
display: block;
opacity: 0;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255, 0) 0%, rgba(255,255,255,.5) 100%);
}
.btn--bubble:hover::before {
animation: expand 2.5s .5s infinite;
}
.btn--bubble:hover::after {
animation: expand 2.5s infinite;
}
@keyframes expand{
0% {
opacity: .5;
}
100% {
transform: scale(10);
opacity: 0;
}
}ボーダーがアニメーションするボタン
ボーダーが左上と右下からアニメーションするボタンです。heightとwidthを0から100%に広げることで実現しています。
<!-- HTML -->
<a href="" class="btn--border">BUTTON</a>/* CSS */
.btn--border {
display: flex;
width: 180px;
height: 70px;
justify-content: center;
align-items: center;
color: #333;
font-weight: bold;
font-size: 20px;
background: #fff;
text-decoration: none;
border: 3px solid #333;
transition: .3s;
box-sizing: border-box;
position: relative;
}
.btn--border::before {
content: '';
height: 0;
width: 0;
right: -3px;
top: -3px;
position: absolute;
border-top: 3px solid orange;
border-right: 3px solid orange;
border-left: 3px solid transparent;
border-bottom: 3px solid transparent;
opacity: 0;
transition: .5s;
}
.btn--border::after {
content: '';
height: 0;
width: 0;
bottom: -3px;
left: -3px;
position: absolute;
border-bottom: 3px solid orange;
border-left: 3px solid orange;
border-right: 3px solid transparent;
border-top: 3px solid transparent;
opacity: 0;
transition:.5s;
}
.btn--border:hover {
background: #333;
color: orange;
}
.btn--border:hover::before,
.btn--border:hover::after {
height: 100%;
width: 100%;
opacity: 1;
}まとめ・ウェブサイトと調和するボタンを設置しよう
ボタンデザインたくさんあって目移りすると思いますが、凝りすぎているとサイトと調和するのが難しい場合もあります。
サイトと調和するかよく考慮した上で、実装するのが◯ですね！
その他チェックボックス やセレクトボックスのフォームパーツ類もコードスニペットあります。 参考にしてください。
CSSでラジオボタン・チェックボックスの見た目を変える方法を詳しく解説しました。HTML/C･･･
フォームパーツのカスタマイズって難しいですよね？中でもセレクトボックス（プルダウンメニュー）をC･･･
みなさんのコーディングライフの一助となれば幸いです。
最後までお読みいただきありがとうございました。
