cssでボタンのデザイン

いつものようにはてなブックマークをチェックしていて、こんな記事を読みました。

広告リンク…というよりはボタンに見えますが、cssでボタンを装飾しよう的な内容です。

専門家ではありませんが、私もcssでボタンデザインをいろいろやってみたことがあります。記述を少しずつ変えていくとだんだんそれっぽいものになっていくのが面白いです。

ちなみに私は現在こんなものを使っています。

このボタンは以下の記事で書かれていることをやってみた感じです。

なお、私のボタンのhtmlとcssは以下のとおり。

html
<div class="linkbtn"><a href="リンク先URL"><span class="icon2-arrow8-right"></span><span class="linkbtntext">ボタンの文字</span></a></div>

css
.linkbtn{
 text-align:center;margin:0 0 1.5em 0;}
.linkbtn a{
 text-decoration:none;
 display:inline-block;
 border-radius:28px;
 color:#fff;
 padding:1em 2em;
 font-size:16px;
 line-height:16px;
 background:#e74c3c;
 border:1px solid rgba(0, 0, 0, .04);
 box-shadow:-1px 1px 2px rgba(0, 0, 0, .3), -1px 1px 1px rgba(255, 255,255, .35) inset;
 text-shadow:1px -1px 0 rgba(0,0,0,0.3);
 font-family:'Montserrat';
 font-weight:700;
 background:-moz-linear-gradient(top, #e74c3c, #d14536);
 background:-webkit-gradient(linear, left top, left bottom, from(#e74c3c), to(#d14536));
}
.linkbtn a .icon2-arrow8-right,.linkbtn a .icon2-arrow7-down{
 font-weight:normal;
 font-size:22px;
 margin-right:1px;
 color:rgba(255,255,255,0.7);
}
.linkbtn a .linkbtntext{
 position:relative;top:-3px;
}
.linkbtn a:hover{
 color:#fff;
 background:#ef4f3f;
 background:-moz-linear-gradient(top, #ef4f3f, #dd4838);
 background:-webkit-gradient(linear, left top, left bottom, from(#ef4f3f), to(#dd4838));
 box-shadow:-1px 2px 4px rgba(0, 0, 0, .3), -1px 2px 3px rgba(255, 255,255, .35) inset;
}

  • 本記事は広告およびアフィリエイトプログラムによる収益を得ています。

いろいろ

上のものは私のサイトの場合なので、もっと単純な基本パターンでやってみます。最初の色白おばけさんの記事にあったものです。
<div class="ad-link">
<a href="">表示させたいテキスト広告リンク</a>
</div>

これを元にいろいろ加えてみます。

その1 とりあえず背景ありの角丸

css
.ad-link{
 text-align:center;
}
.ad-link a{
 display:inline-block;
 background:#27ae60;
 color:#fff;
 border-radius:0.5em;
 text-decoration:none;
 line-height:1;
 margin:0.6em 0;
 padding:1em 2em;
}
.ad-link a:hover{
 background:#37c573;
 color:#fff;
}

先に参考リンクとしたズルいデザインテクニックで書かれていますが、左右のpaddingを2em、上下を1emくらいにすると現代っぽいです。padding:1em 2em;です。

その2 ボーダーとシャドウ

css
.ad-link{
 text-align:center;
}
.ad-link a{
 display:inline-block;
 background:#27ae60;
 color:#fff;
 border-radius:0.6em;
 text-decoration:none;
 line-height:1;
 margin:0.6em 0;
 padding:1em 2em;
 border:1px solid rgba(0, 0, 0, .04);
 box-shadow:-1px 1px 0px rgba(0, 0, 0, .2), -1px 1px 1px rgba(255, 255,255, .35) inset;
}
.ad-link a:hover{
 background:#37c573;color:#fff;
}

borderとbox-shadowを加えてほんの少しですが立体感を出しています。border-radiusもちょっとだけ大きくしました。

その3 グラデーションとテキストシャドウ

css
.ad-link{
 text-align:center;
}
.ad-link a{
 font-weight:bold;
 display:
 inline-block;
 background:#27ae60;
 color:#fff;
 border-radius:0.7em;
 text-decoration:none;
 line-height:1;
 margin:0.6em 0;
 padding:1em 2em;
 border:1px solid rgba(0, 0, 0, .04);
 box-shadow:-1px 1px 0px rgba(0, 0, 0, .2), -1px 1px 1px rgba(255, 255,255, .35) inset;text-shadow:1px -1px 0 rgba(0,0,0,0.3);
 background:-moz-linear-gradient(top, #27AE60, #259f58);
 background:-webkit-gradient(linear, left top, left bottom, from(#27AE60), to(#259f58));
}
.ad-link a:hover{
 background:#37c573;
 color:#fff;
 background:-moz-linear-gradient(top, #37c573, #259f58);
 background:-webkit-gradient(linear, left top, left bottom, from(#37c573), to(#259f58));
}

グラデーションとテキストシャドウを加える事によってより立体感を出しています。ただし、どちらもほんの僅かだけかけることが重要です。

その1からその3まで、じょじょに変わっていくのは面白いですよね。

その4 フラットな感じ

css
.ad-link{
 text-align:center;
}
.ad-link4 a{
 font-weight:bold;
 display:inline-block;
 background:#27ae60;
 color:#fff;
 border-radius:0.4em;
 text-decoration:none;
 line-height:1;
 margin:0.6em 0;
 padding:1em 2em;
 box-shadow:0 6px 0 rgba(31,139,77,1);
 text-shadow:1px -1px 0 rgba(0,0,0,0.3);
}
.ad-link a:hover{
 color:#fff;
 box-shadow:0 8px 0 rgba(31,139,77,1);
 position:relative;top:-2px;
}
.ad-link a:active{
 box-shadow:0 4px 0 rgba(31,139,77,1);
 position:relative;top:2px;
}

その5 枠線な感じ

css
.ad-link{
 text-align:center;
}
.ad-link a{
 font-weight:bold;
 display:inline-block;
 background:#ebf5ef;
 color:#27ae60;
 border:3px solid #27ae60;
 border-radius:1.6em;
 text-decoration:none;
 line-height:1;
 margin:0.6em 0;
 padding:1em 2em;
}
.ad-link a:hover{
 color:#27ae60;
 background:#d7ebdf;
}

その6 枠線とグラデーション

css

.ad-link{
 text-align:center;
}
.ad-link a{
 font-weight:bold;
 display:inline-block;
 background:#d9d759;
 color:#2f2f0e;
 border-radius:1.6em;
 text-decoration:none;
 line-height:1;
 margin:0.6em 0;
 padding:0.8em 1.8em;
 border:6px solid #1d3a29;
 box-shadow:-1px 1px 0px rgba(0, 0, 0, .2), -1px 1px 1px rgba(255, 255,255, .35) inset;
 text-shadow:1px -1px 0 rgba(255,255,255,0.2);
 background:-moz-linear-gradient(top, #d9d759, #cbca54);
 background:-webkit-gradient(linear, left top, left bottom, from(#d9d759), to(#cbca54));
}
.ad-link a:hover{
 background:#37c573;color:#2f2f0e;
 border:8px solid #1d3a29;
 border-radius:1.8em;
 padding:0.9em 2em;
 background:-moz-linear-gradient(top, #d9d759, #cbca54);
 background:-webkit-gradient(linear, left top, left bottom, from(#d9d759), to(#cbca54));
}

cssは面白いですね

cssはもっといろんなことできますし、アイコンフォントとか使えばもっと表現の仕方も増えます。とりあえず今回はここまで。最初にあげた「ズルいデザインテクニック」を読めばポイントはわかると思います。

ただまぁ、これでクリック率が上がるかは知りません。もっと言うと、上のはボタン(短い文言用)なので、はたしてアフィリエイト広告で合うのかどうか…。

  • 本記事に記載された内容は記事公開時点のものであり、必ずしも最新の情報とは限りません。記事をご覧いただく際には、最新の情報を確認するようお願いいたします。
OREFOLDERの最新情報をお届けします
author icon
orefolder

OREFOLDER編集長。
1979年静岡県清水市生まれ、現静岡市清水区在住。

様々な巡り合わせから、このサイト1本で生活してる氷河期世代の一人。ガジェットに限らず広く浅く様々なものに興味があります。

スマートフォンは2010年にXperia SO-01Bを買ったのが最初。同時にb-mobile U300で格安SIMも始めました。これまでに数百台のスマホを手にし、格安SIMも常時20種類以上契約しています。

⇨orefolderの記事一覧