amazon・楽天などショップリンクをCSSでボタンにしよう！

ボタンを設置

テンプレートの設置したい場所に記述

class は半角スペースを開けて２個付けます。
１個は型デザイン用で共通。もうひとつはショップごとに変更するカラー用です。

amazonで購入ボタン

<div class="shop_btn amazon_btn">
<a href="#">amazonで購入</a>
</div>

楽天BOOKSで購入ボタン

<div class="shop_btn rakuten_btn">
<a href="#">楽天BOOKSで購入</a>
</div>

サイトで購入

<div class="shop_btn hanyo_btn">
<a href="#">サイトで購入</a>
</div>

詳細をみる

<div class="shop_btn shousai_btn">
<a href="#">詳細をみる</a>
</div>

READ

<div class="shop_btn read_btn">
<a href="#">READ</a>
</div>

CSSでボタンのデザイン指示する

ボタン形状のCSS

まずはカタチだけまとめて指示。カラーは次の項目で。

/* ==================SHOPINGボタン共通====================== */
.shop_btn {
	overflow: hidden;
	width: 180px;
	height: auto;
	margin: 10px;
        padding: 10px 20px 10px 20px;
        line-height: 100%;
        color: #ffffff;
	text-align:center;
        font-weight: 400;
        font-size: 1em;
        text-decoration: none;
        -webkit-transition: .3s ease;
        -moz-transition: .3s ease;
        -o-transition: .3s ease;
        transition: .3s ease;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        -ms-border-radius: 12px;
        -o-border-radius: 12px;
        border-radius: 12px;     
}

.shop_btn a {
        text-decoration: none;
	text-align:center;
        color: #ffffff;
        -webkit-transition: .3s ease;
        -moz-transition: .3s ease;
        -o-transition: .3s ease;
        transition: .3s ease;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        -ms-border-radius: 12px;
        -o-border-radius: 12px;
        border-radius: 12px;     
       text-decoration:none;
}

ショップごとに違うカラーを指示します

SHOPカラーに合わせたカラーCSS

/* ==================SHOPINGボタンカラー====================== */
.amazon_btn{
  background: #838383;
}
.amazon_btn:hover {
  background: #a3a3a3;
}

.rakuten_btn {
  background: #bf0000;
}

.rakuten_btn:hover {
  background: #de5c5b;
}

.hanyo_btn {
  background: #838383;
}

.hanyo_btn:hover {
  background: #a3a3a3;
}

.shousai_btn {
  background: #00afcc;
}

.shousai_btn:hover {
  background: #82cddd;
}

.read_btn {
  background: #ff8381;
  letter-spacing: 4px;
}

.read_btn:hover {
  background: #ff9c9a;
}

SHOPカラーより優しくしたカラーCSS

サイトに寄っては少し淡い色のほうがいいかもです

/* ==================SHOPINGボタンカラー====================== */
.amazon_btn{
  background: #a3a3a3;
}
.amazon_btn:hover {
  background: #838383;
}

.rakuten_btn {
  background: #ff6666;
}

.rakuten_btn:hover {
  background: #eb3b2f;
}

.hanyo_btn {
  background: #a3a3a3;
}

.hanyo_btn:hover {
  background: #838383;
}
.shousai_btn {
  background: #82cddd;
}

.shousai_btn:hover {
  background: #00afcc;
}

.read_btn {
  background: #ff9c9a;
  letter-spacing: 4px;
}

.read_btn:hover {
  background: #ff8381;
}

お好みでショップカートアイコンなどを付けてもいいですね。