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

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