CSSだけで矢印が動くのアニメーションボタン作ってみた【コピペOK】

「詳細はこちら」とか「公式サイトはこちら」とか、アフィリエイトをやる人にとってはなじみが深いであろうボタン。

クリックしてもらうためにはボタンも目立つ方が絶対いいよね。

で、色や形、大きさで目立たせるのもいいけど、動きも加えられたらって思いませんか?

ということで、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にした方が軽いよね。

ページの表示速度にこだわりだすと、画像を使うことがいかに響いてくるかよく分かるはず。

関連記事

    関連記事はありません。