2018.12.21

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


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

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





TWITTER

Last updated  2018.12.25 10:39:53
[アフィリエイト道場] カテゴリの最新記事