【btn】画像を使わずCSSで作る「ボタン」のサンプルコード

画像を使わず、html＋cssで設定したボタンデザインのサンプルコードです。背景にグラデーションを使ったり、ブラウザの幅が480pxより狭くなると、幅や文字が小さくなるCSSを、aタグに設定しています。

デモ

ブラウザの幅を伸縮させると切り替わります。
ボタン

CSS＋html

<!-- CSS -->
<style type="text/css">
<!--
a.btn-blk {
width: 16em;/*ボタンの幅*/
display: block;/*ブロック要素（縦並び）*/
background: -moz-linear-gradient(top, #5bc2dc, #2e9bc4);
background: -webkit-linear-gradient(top, #5bc2dc, #2e9bc4);
background: linear-gradient(to bottom, #5bc2dc, #2e9bc4);/*背景グラデーション*/
margin: 1em auto; padding: 1em;line-height: 1em;text-decoration: none;/*余白、行高、文字装飾なし*/
text-align: center;border-radius: 0.3em;/*行揃え、角丸*/
font-size: 1.5em;letter-spacing: 0.1em;color: #fff;font-weight: bold;/*文字サイズ、字間、文字色、太文字*/
transition: .4s;/*切替速度*/}
a.btn-blk:visited {text-decoration: none;}/*クリック後も装飾なし*/
a.btn-blk:hover,a.btn-blk:active {background: #5bc2dc;color: #fff000;}/*マウスオン時の背景、文字色*/
a.btn-blk span:after{font-family: FontAwesome;content:'\f24d';padding-left: 0.5em; font-size: 1em;}/*アイコン位置サイズ*/
@media screen and (max-width: 480px) {
a.btn-blk {width: 10em;font-size: 1.2em;}/*幅480px以下での、ボタンの幅、文字サイズ*/
}
-->
</style>
<!-- html -->
<a href="#" class="btn-blk" target="_blank"><span>ボタン</span></a>

アイコンにfont-awesome（旧バージョン）を使用していますのでheadタグに以下のコードを挿入してください。

<!-- font-awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

font-awesomeについては、こちらの記事もご参考になってください。

【FontAwesome】アイコン表示に便利なWebフォントをcss擬似要素で指定

WebアイコンフォントのFontAwesomeの使い方を紹介します。アイコンを画像で表示すると、スマホでビンチしたときに表示が粗くなったりしますが、Webフォントだと表示がハッキリすると共に、文字とセットで使った場合フォントサイズと連動...