【サンプル】CSSボタンデザイン
いつもご利用いただきありがとうございます。楽天アフィリエイト事務局です。↓以前ご案内したテキストリンクをボタンにする方法≫ 検索結果をアフィリエイトで紹介しよう!【テキストリンク活用編】この方法で作成できるボタンデザインを参考までにご紹介します。※直書きではなく、外部CSSでの作成方法となります。※こちらで案内しているCSSに関しまして、動作保証はしておりません。 正常に動かない場合もございます。その場合はご利用をお控えください。ボタンのhtmlはすべて共通です。共通HTML<div class="btn">楽天アフィリエイトHTMLタグをそのまま入れてください</div>1. シンプルなボタンCSS.btn a{display: inline-block;text-decoration: none;padding: 10px 15px;color: #ec407a;border: solid 2px #ec407a;border-radius: 2px;transition: .6s;}.btn a:hover {background: #ec407a;color: #ffffff;}2. 影付きボタンCSS.btn a{display: inline-block;text-decoration: none;padding: 10px 15px;background: #ec407a;color: #ffffffff;box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);border-radius: 3px;}.btn a:hover {-ms-transform: translateY(2px);-webkit-transform: translateY(2px);transform: translateY(2px);box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1);}3. 押し込みボタンCSS.btn a{display: inline-block;text-decoration: none;padding: 0.5em 1em;background: #ec407a;color: #ffffff;border-bottom: solid 3px #A52C55;border-radius: 3px;}.btn a:hover {-ms-transform: translateY(2px);-webkit-transform: translateY(2px);transform: translateY(2px);border-bottom: none;border-top: solid 3px #ffffff;}・ボタンを作成して紹介する場合は、記載するテキストは「サービス名」(楽天市場/楽天トラベルなど)のみ可能です・テキストリンクで紹介する場合は、楽天アフィリエイトガイドラインの「例外として編集可能としているテキストの変更について」に沿って修正してください https://affiliate.rakuten.co.jp/guideline/rule/#anchor-01以上になります。引き続き楽天アフィリエイトをご活用ください。楽天アフィリエイトトップページへ>>