画像を使わず、html＋cssで設定したボタンデザインのサンプルコードです。背景にグラデーションを使ったり、ブラウザの幅が480pxより狭くなると、幅や文字が小さくなるCSSを、aタグに設定しています。
デモ
ブラウザの幅を伸縮させると切り替わります。
ボタン
CSS＋html（コメント無し）
<!-- CSS -->
<style type="text/css">
<!--
a.btn-blk {
width: 80%;display: block;
background: -moz-linear-gradient(top, #5bc2dc, #2e9bc4);background: -webkit-linear-gradient(top, #5bc2dc, #2e9bc4);background: linear-gradient(to bottom, #5bc2dc, #2e9bc4);
margin: 1rem auto; padding: 1rem;line-height: 1;text-decoration: none;text-align: center;border-radius: 10px;
font-size: 1.5rem;letter-spacing: 0.05rem;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: .5rem; font-size: 1.4rem;}
@media screen and (max-width: 480px) {
a.btn-blk {width: 70%;}
}
-->
</style>
<!-- html -->
<a href="#" class="btn-blk" target="_blank"><span>ボタン</span></a>CSS＋html（コメント有り）
<!-- CSS -->
<style type="text/css">
<!--
a.btn-blk {
width: 80%;/*ボタンの幅*/
display: block;/*ブロック要素*/
background: -moz-linear-gradient(top, #5bc2dc, #2e9bc4);
background: -webkit-linear-gradient(top, #5bc2dc, #2e9bc4);
background: linear-gradient(to bottom, #5bc2dc, #2e9bc4);/*背景グラデーション*/
margin: 1rem auto; padding: 1rem;line-height: 1;text-decoration: none;/*余白、行高、文字装飾なし*/
text-align: center;border-radius: 10px;/*行揃え、角丸*/
font-size: 1.5rem;letter-spacing: 0.05rem;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: .5rem; font-size: 1.4rem;}/*アイコン位置サイズ*/
@media screen and (max-width: 480px) {
a.btn-blk {width: 70%;}/*幅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フォントだと表示がハッキリすると共に、文字とセットで使った場合フォントサイズと連動...
saijilab.com
