【サンプル】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

以上になります。
引き続き楽天アフィリエイトをご活用ください。

楽天アフィリエイトトップページへ＞＞

お気に入りの記事を「いいね！」で応援しよう