
「詳細はこちら」とか「公式サイトはこちら」とか、アフィリエイトをやる人にとってはなじみが深いであろうボタン。
クリックしてもらうためにはボタンも目立つ方が絶対いいよね。
で、色や形、大きさで目立たせるのもいいけど、動きも加えられたらって思いませんか?
ということで、CSSのアニメーションを使って、動くボタンのサンプルを作ってみました。
マウスホバーで動くんじゃなくて、常時動いてるやつです。
コピペOKなのでよかったらどうぞ。
パターン1:とりあえずシンプルに
できるボタンはこんな感じです。
シンプルなやつって汎用性があっていいよね。
詳細はこちら
■HTML
<a href="#" class="tj-btn-1">詳細はこちら</a>
■CSS
a.tj-btn-1 {
position:relative;
text-align:center;
display:inline-block;
margin:15px 0;
padding:.6em 2em .6em 1em;
font-size:1.5em;
font-weight:bold;
line-height:1.3em;
text-decoration:none;
color:#fff;
background:#090;
border-radius:15px;
border:2px solid #fff;
box-shadow:0 0 0 2px #090;
}
a.tj-btn-1:after{
position:absolute;
top:50%;
right:.5em;
transform: translateY(-50%);
content: "≫";
animation:infinite movearrow 1.5s ;
}
@keyframes movearrow {
0%{margin:0 15px 0 -15px;opacity:.3;}
}
パターン2:ちょっと盛る
できるボタンはこんな感じです。
ツヤと立体感を付けてみた。
でも逆に汎用性を失っているかもしれないorz
詳細はこちら
■HTML
<a href="#" class="tj-btn-2">詳細はこちら</a>
■CSS
a.tj-btn-2 {
position:relative;
text-align:center;
display:inline-block;
margin:15px 0;
padding:.6em 2em .6em 1em;
font-size:1.5em;
font-weight:bold;
line-height:1.3em;
text-decoration:none;
color:#fff;
background: linear-gradient(to bottom, rgba(0,159,52,1) 0%,rgba(0,197,65,1) 100%);
border-radius:15px;
border:2px outset #6c6;
box-shadow:1px 1px 10px #666;
}
a.tj-btn-2:after{
position:absolute;
top:50%;
right:.5em;
transform: translateY(-50%);
content: "≫";
animation:infinite movearrow 1.5s ;
}
@keyframes movearrow {
0%{margin:0 15px 0 -15px;opacity:.3;}
}
パターン2:文言を2行に
できるボタンはこんな感じです。
2行にすることで、よりそれっぽいボタンに。
<span>で囲った文言が2行目の小さい文字になります。
詳細はこちら今なら特典付きだよ♪
■HTML
<a href="#" class="tj-btn-3">詳細はこちら<span>今なら特典付きだよ♪</span></a>
■CSS
a.tj-btn-3 {
position:relative;
text-align:center;
display:inline-block;
margin:15px 0;
padding:.6em 2em .6em 1em;
font-size:1.8em;
font-weight:bold;
line-height:1.3em;
text-decoration:none;
color:#fff;
background:#090;
border-radius:15px;
border:2px solid #fff;
box-shadow:0 0 0 2px #090;
}
a.tj-btn-3:after{
position:absolute;
top:50%;
right:.5em;
transform: translateY(-50%);
content: "≫";
animation:infinite movearrow 1.5s ;
}
a.tj-btn-3 span{
font-size:.5em;
display:block;
line-height:1.5em;
font-weight:normal;
}
@keyframes movearrow {
0%{margin:0 15px 0 -15px;opacity:.3;}
}
どこが動いてるかって?
矢印のところです。
もっとガッツリ動かすことも出るけど、あえて控えめにしました。
クリックされやすくなるの?効果あるの?って聞かれたら・・・。
分かりませんorz
CSSにする必要あるの?
こんなん画像でやったらいいじゃんって思うかも知れません。
はい、その通りです(;´Д`)
CSSで表現することのメリットは、文言を気軽に変えられるということです。
「詳細はこちら」とか、「お申込みはこちら」とか、文言固定なら画像でもいいと思う。
あとはCSSにした方が軽いよね。
ページの表示速度にこだわりだすと、画像を使うことがいかに響いてくるかよく分かるはず。
コメントを残す