ボタンを設置
テンプレートの設置したい場所に記述
class は半角スペースを開けて2個付けます。
1個は型デザイン用で共通。もうひとつはショップごとに変更するカラー用です。
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; }
お好みでショップカートアイコンなどを付けてもいいですね。