HTMLで【実行】とか【キャンセル】と文字だけのボタンは簡単に作れるけど、
【絵・テキスト】なボタンはAタグでしかできないらしい。
まず
<a href="" class="btn1">ボタン１</a> a.btn1{
display:block;
text-align:center;
width:6em;height:1.5em;/*ボタンの大きさ*/
background:url(絵) no-repeat;/*絵/
background-color:#00913D;/*ボタンの色*/
text-decoration:none !important; /*テキストの下線消し*/
}で作ると
だが、テキストの上下の余白をもっと取ると絵がSVGだったら絵がでかくなって困る。
CSSの仮想クラス:beforeを使って絵だけの設定をできるけど、
<a href="#" class="btn2">ボタン2</a>を作り
a.btn2 {
padding: 0.5em;
margin: 10px 0;
display: block;
width: 6em; height: 1.5em; /* ボタンの大きさ */
color: #fff !important; /*テキストの下線消し*/
background: #00913D;
text-decoration: none;
font-weight: bold;
font-size:16px;
border-radius: 3px;
text-align:center;
}
a.btn2:before {
content: ""; /* 外すと絵が出なくなる（謎 */
display: inline-block; /＊ 絵とテキストを横に並べる */
width: 18px; height: 18px; /* 絵のサイズ */
margin: -3px 5px 0 0; /* 主にテキストとの間隔 */
background: url("絵") no-repeat; /* 絵 */
background-color:#00913D;
background-size: contain;
vertical-align: middle; /* テキストと縦位置調整 */
}で、デザインを調整するとできる様だ。
絵を後ろに出すなら :after に変えればいい
しかしCSSの調整が大変過ぎる。
<a href="#" class="btn4"><img src="arrow.svg" class="img4"><span>ボタン４</span></a>a.btn4{
background-color:#00913D;
text-decoration:none !important;
border-radius: 3px;
}
a .img4{
margin: 4px 5px 6px 5px; /*ちょっと絵を上に*/
width: 18px; height: 18px;
vertical-align: middle;
}
a span { vertical-align: middle; }の方が楽かな
でも、デザインの全般的な見直し・・・とか来ると痛いなぁ