[HTML]ボタン

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; }

の方が楽かな