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にした方が軽いよね。

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

関連記事

    関連記事はありません。