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

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

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

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

ということで、CSSのアニメーションを使って、動くボタンのサンプルを作ってみました。

マウスホバーで動くんじゃなくて、常時動いてるやつです。

コピペOKなのでよかったらどうぞ。

パターン１：とりあえずシンプルに


できるボタンはこんな感じです。
シンプルなやつって汎用性があっていいよね。

詳細はこちら

■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;}
}

パターン２：ちょっと盛る


できるボタンはこんな感じです。
ツヤと立体感を付けてみた。
でも逆に汎用性を失っているかもしれない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にした方が軽いよね。

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

関連記事

    関連記事はありません。