簡単!CSSで立体的なポチッと凹むボタンの作り方

MENU
MENU
WEBデザイン

簡単!CSSで立体的なポチッと凹むボタンの作り方

どうも、つなかんです。

今日は簡単でかつ見た目をグッと良くする立体的なボタンの作り方を紹介したいと思います。

↓こんな感じのボタンですね。

立体ボタンのメリット

CSSで立体ボタンを作るメリットですが、圧倒的メリットは見た目(UI)の改善ではないでしょうか。

人間の心理として立体的に突起している四角い物は無意識に押せるものと理解します。

これはサイトやLP、アプリを作る上でユーザーの思考の妨げにならない為に非常に大切なことです。

ここの改善だけでCVR(成約率)が130%以上改善する事があるくらいなんですね。

サイトのデザイン次第ではあるのですが可能であれば立体ボタンをオススメします。

他にも影を利用して浮かすという表現の手法もあります。

フラットなデザインのサイトでしたらそちらが良いかもしれません。

CSSで作るメリット

画像でも立体ボタンは作れますが、CSSで作る事をオススメします。

なぜなら、一度作ってしまえばサイト内のどこにでも流用可能だからです。

LPやアプリなどでは設置する箇所が多いかと思います。

画像ですとボタン毎にテキストに変更があれば都度Photoshopなどで作らなくてはいけませんからね。

そう行った観点からCSSで作成することはサイト運用する上とてもメリットがあります。

HTMLの記述

では早速作って見ましょう。

HTMLはシンプルです。

レイアウト用のdivとボタン用のaタグを置くだけで良いです。

それに分かりやすくdivのClassは”entryBtnLayout”。

aタグのClassは”entryBtn”にしています。

ちなみにClass名は何でもいいですよ。

<div class="entryBtnLayout">
  <a class="entryBtn" href="#">購入はコチラ</a>
</div>

すると下のようになる思います。

HTMLはこれで終了です。

CSSの記述

それではCSSに何をあてるのか解説していきたいと思います。

まずはaタグにCSSをあてていきましょう。

コメントアウトで解説を入れていますのでそれぞれどういった意図であてているのか確認して下さい。

.entryBtn {
  display: inline-block;/*inline扱いかつwidthとheightを反映する事が出来ます*/
  width: 300px;/*横幅です用途に合わせて数値を変えましょう*/
  height: auto;/*テキストが2段になる場合もあるので数値ではなくautoです。*/
  text-decoration: none;/*デフォルトの下線を除去*/
  color: #fff;/*文字の色*/
  font-size:18px;/*文字の大きさ*/
  background-color: #008000;/*ボタンの色*/
  border-radius:8px;/*ボタンの角丸具合*/
  text-align:center;/*ボタン内テキストを真ん中に*/
  padding:10px 20px;/*ボタンの内スペースの幅です*/
}

上記のCSSをあてると以下のようになると思います。

よくあるフラットなデザインのボタンですね。

さてここから立体ボタンにしていきしょう。

上記のCSSにさらに足していきます。

.entryBtn {
  display: inline-block;
  width: 300px;
  height: auto;
  text-decoration: none;
  color: #fff;
  font-size:18px;
  background-color: #008000;
  border-radius:8px;
  text-align:center;
  padding:10px 20px;
  /*↓追加↓*/
  box-shadow:0 6px 0 0 #005400;/*cssの影の機能を利用してボタンの側面を描いています。ボタンの色より暗い色を指定しましょう*/
  transform: translateY(-6px);/*影を使って側面を描いた分、ボタンを上に移動しています*/
}

どうですか？

だいぶボタンらしくなってきましたね。

ただこれだとマウスを当てた際に凹まないのでちょっとボタンらしくないですよね。

次はこのボタンを凹ますためのCSSを加えたいと思います。

.entryBtn {
  display: inline-block;
  width: 300px;
  height: auto;
  text-decoration: none;
  color: #fff;
  font-size:18px;
  background-color: #008000;
  border-radius:8px;
  text-align:center;
  padding:10px 20px;
  box-shadow:0 6px 0 0 #005400;
  transform: translateY(-6px);
  /*↓追加↓*/
  transition:0.3s all;/*状態変化時の動作を制御するプロパティです。*/
}
/*↓追加↓*/
.entryBtn:hover {/*:hoverはその要素にマウスを当てた時の状態*/
  box-shadow:0 2px 0 0 #005400;/*hoverしたら影が縦に4px減るようにしています*/
  transform: translateY(-2px);/*影が減った分、下に移動させています。*/
}

マウスをあてると凹むボタンになりましたね。

これでもいいんですがもうひと工夫してみましょう。

ボタンにグラデーションを適用してみたいと思います。

グラデーションの記述は少し面倒なのでWEBツールを使って生成するのをオススメします。

私は使っているのはUltimate CSS Gradient Generatorです。

こちらですと視覚的に確認しながらCSSのグラデーションを生成することが出来ます。

Ultimate CSS Gradient Generator: https://www.colorzilla.com/gradient-editor/

上記サイトで生成したコードをコピペしたのが下のコードになります。

.entryBtn {
  display: inline-block;
  width: 300px;
  height: auto;
  text-decoration: none;
  color: #fff;
  font-size:18px;
  /*background-color: #008000; ←元の背景色は不要なので削除*/ 
  border-radius:8px;
  text-align:center;
  padding:10px 20px;
  box-shadow:0 6px 0 0 #005400;
  transform: translateY(-6px);
  transition:0.3s all;
  
  /*↓コピーしたCSSをここに追加↓*/
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0ba500+0,008000+100 */
  background: #0ba500; /* Old browsers */
  background: -moz-linear-gradient(top,  #0ba500 0%, #008000 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #0ba500 0%,#008000 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #0ba500 0%,#008000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0ba500', endColorstr='#008000',GradientType=0 ); /* IE6-9 */
  /*↑追加ここまで↑*/
}

.entryBtn:hover {
  box-shadow:0 2px 0 0 #005400;
  transform: translateY(-2px);
}

グラデーションを加えるだけでたいぶ雰囲気が変わりますね。

ボタンはこれで完成です。

最後にボタンの設置場所に関するCSSを記述しましょう。

aタグのボタンの周りを囲っていたdivの”entryBtnLayout”にCSSをあてます。

.entryBtnLayout {
  text-align: center;/*ボタンをセンター寄りに設置*/
}

.entryBtn {
  display: inline-block;
  width: 300px;
  height: auto;
  text-decoration: none;
  color: #fff;
  font-size:18px;
  border-radius:8px;
  text-align:center;
  padding:10px 20px;
  box-shadow:0 6px 0 0 #005400;
  transform: translateY(-6px);
  transition:0.3s all;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0ba500+0,008000+100 */
  background: #0ba500; /* Old browsers */
  background: -moz-linear-gradient(top,  #0ba500 0%, #008000 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #0ba500 0%,#008000 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #0ba500 0%,#008000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0ba500', endColorstr='#008000',GradientType=0 ); /* IE6-9 */
}

.entryBtn:hover {
  box-shadow:0 2px 0 0 #005400;
  transform: translateY(-2px);
}

ボタンが真ん中に移動しましたね。

これで完成です。

後は用途別にaタグのhref属性にURLを入れて下さい。

以上がCSSでのボタンの作り方でした。

この記事をシェアする

合わせて読みたい関連記事