商品リンクボタンのHTMLとCSS

Sample

Rinkerなどとは別に、個別で商品リンクをしたいときの、Amazonなどへの誘導ボタンのHTMLと追加CSSです。コピー、カスタマイズなど自由にお使いください。

<a href="#" target="_blank" rel="noreferrer noopener" class="btn" style="background-color: #d69d00; color: #fff;">○○○○○</a>

背景色と文字色を変えたいときのために、HTMLの中でstyle指定するようにしています。

.btn {
  display: inline-block;
  padding:0.3rem 0.5rem;
  text-decoration :none;
  font-weight: bolder;
  text-decoration: none;
  border-radius: 0.2rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  transition: .3s;
}

.btn:hover {
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
}

CSSコードは、サルワカさんのサイトを参考にさせていただきました。