【CSS】ボタン要素をカスタマイズ！
クリックエフェクトを実装しよう
ウェブページを作っていると何かと出番のあるボタン要素。
ボタン要素そのものを実装するのは簡単ですが、デフォルトのボタンだと、サイトのデザインによっては浮いてしまうかも知れません。
無機質なデフォルトのデザインにも味はあると思う派ですが、せっかくならサイトに合わせてカスタマイズもしたいですよね！
ということで、ここではボタン要素の見た目をカスタマイズする方法と、サンプルソースを見ていきたいと思います。
今回はボタン要素のカスタマイズですが、もちろんボタン要素以外のボタン（テキストリンクなど）にも応用できますよ。
早速、見ていきましょう！
ボタン要素をカスタマイズする前準備
今回設置するボタンのHTMLのコードはこちら。
ごくごく普通のボタンです（表示サンプルなのでクリックしても特に何もありません）。
<div class="bt">
<button>デフォルトのボタン</button>
</div>
コピーボタンにはデフォルトでスタイルが設定されているので、まずはこれをCSSで無効にします。
.bt button{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
続いて、ボタンの見た目をカスタマイズしていきましょう。
ボタンを見栄えよく！
ホバーエフェクトとクリックエフェクト
デフォルトのボタン要素には、シンプルながらもホバーやクリック時の効果がついているので、「押した感じ」が分かりやすいデザインとなっています。
ホバーしてもクリックしても見た目が何も変わらないと、ユーザーにはボタンが動いているのか分かりません。
実際には機能していても、「動いてない」と思ってしまうこともあります。
ボタンをカスタマイズする際は、ホバーやクリックに効果をつけて、ユーザーがボタンを「押した感じ」が分かりやすいデザインを目指しましょう。
ということで、ボタンの基本的なデザインと、ホバー時の効果、クリック時の効果をつけてみたサンプルボタンがこちら。
ソースはこちらです。
.bt{
height: 100px;
}
button{
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
padding: 1em 3em;
color: #fcfcfc;
background: #53cde2;
border: 0;
border-bottom: solid #aaa 2px;
border-radius: 8px;
transition: opacity .1s;
&:hover{
opacity: 0.8;
}
&:active{
border-bottom: solid #aaa 0px;
transform: translate(0px,2px);
}
}
.bt{
height: 100px;
}
button{
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
padding: 1em 3em;
color: #fcfcfc;
background: #53cde2;
border: 0;
border-radius: 8px;
transition: opacity .1s, transform .1s;
&:hover{
opacity: 0.8;
}
&:active{
transform: scale(.98);
}
}
基本的な装飾は「padding」でボタンに幅と高さを持たせて、「border-radius」で角を丸めてやわらかい雰囲気にしています。
また、カスタマイズボタンAでは、ボタンに影っぽい部分をつけて立体感を出しています。
ホバー時には透明度を上げる効果をつけています。
クリック時には、カスタマイズボタンAではボタンの影っぽい部分を消して、その分表示位置を下げることで「ボタンを押したっぽい感じ」を演出。
一方、カスタマイズボタンBではボタンに立体感はありませんが、クリック時にボタンの大きさをほんの少し小さくすることで、むぎゅっと「押したっぽい感じ」を演出しています。
「transition」で基本のスタイルから変化するまでの時間を調整できるので、お好みで変更してみてください。
ここで指定しているのは「.1s」なので、0.1秒かけて変化、という意味になります。
ボタンを押すと
テキストが引っ張られる問題
クリック時などにボタンの高さが変化する効果をつけると、下にあるテキストなどが引っ張られて動いてしまうことがあります。
ボタンをクリックした時に下のテキストまで動いてしまうと、なんだかおかしな感じですよね。
そこで、ここではボタンをdiv要素で囲んで高さを指定することで、そうした「引っ張られ」を防止しています。
高さが足りないと効果がなく、ありすぎても浮いてしまうので、実装するボタンの高さに合わせて高さを調整してみましょう。
今回はなるべく軽量になるように、シンプルな記述での装飾を心がけてみました。
何かと活躍する場面の多いボタン装飾！
ぜひ活用してみてくださいね。
