ペタボタンなど多様に使える背景アニメーションボタン | 知恵の樹・アメブロテンプレート
Amebaホームピグアメブロ
芸能人ブログ人気ブログ
新規登録
ログイン

知恵の樹・アメブロテンプレート

アメブロテンプレート・カスタマイズ

ペタボタンなど多様に使える背景アニメーションボタン

はじめに

このブログでも記事下に使用している「ペタ」ボタンと「読者登録」ボタンの
アニメーションで背景をスクロールさせるボタンです。

このエフェクトは本当に面白く、使用する背景画像によって異なる印象を与えます。

ここではパターンの背景画像を使い、繊細なエフェクトを与えています。

用途は多種多様で、メニューやペタ、読者登録などのボタンにどうでしょうか。

マウスを乗せた瞬間、背景が動いて「(;ﾟДﾟ)!ｵｵｫｫｫ-」となればクリック率も上がるとか上がらないとか・・（笑）

まだまだ珍しいボタンとは思いますので、計り知れない可能性もあるのではないでしょうか？

イメージ

ボタンの上にカーソルを乗せてみてください。
読者登録など ペタなど
上下に背景が動きます。
※残念ながらIE（InternetExplorer）では背景がスムーズに動かないようです。

背景アニメーションボタン設置方法

手順は難しそうですが、簡単にコピペでいきましょう。
・背景は画像を入れ替えるだけで変更できます。
・ピンク・ブルーをサンプルで用意しました。
・背景画像はお好きな画像と変更可能です。
※用意したピンク・ブルーの背景画像は、知恵の樹の画像フォルダに保存しています。
特に削除の予定はありませんが、心配な人はコピペして自分のブログの画像フォルダに保存してください。

手順①CSS編集画面で最下部にコピペして追記

手順②HTMLをボタンを設置したい場所に記入

※CSS、HTML共に共通です。

※このブログのように記事下に定型文として利用したい場合は「アメブロ記事下に定型文を表示する方法 」をお読みください。

背景画像

ピンク背景URL
「http://stat.ameba.jp/user_images/20120630/13/lucifer-d0v0b/58/bc/p/o0165026012054521819.png」

知恵の樹-ボタン背景ピンク


ブルー背景URL
「http://stat.ameba.jp/user_images/20120630/13/lucifer-d0v0b/bc/9b/p/o0165026012054542386.png」
知恵の樹-ボタン背景ブルー


CSS
※赤字の部分に任意の背景画像URLを記入。
※/*説明*/を参考に変更してください。
/*▼▼背景移動ボタンここから▼▼*/


#button1 {


  background: #ffffff url('ここに背景画像URL');


  background-position: 0 0;


  color: #000000;　　/*文字の色*/


  font-size: 22px;   /*文字大きさ*/


  font-weight: bold; /*文字（太字）*/


  height: 58px;　　　/*ボタン高さ（変更の場合、背景画像サイズ変更必要）*/


  width: 155px;      /*ボタン幅（変更の場合、背景画像サイズ変更必要）*/


  margin: 50px 0 0 50px;


  overflow: hidden;


  display: block;


  text-align: center;


  line-height: 58px;


  


  /*Transition*/


  -webkit-transition: All 0.8s ease;


  -moz-transition: All 0.8s ease;


  -o-transition: All 0.8s ease;


  -ms-transition: All 0.8s ease;


  transition: All 0.8s ease;


  


  /*Rounded Corners*/


  -webkit-border-radius: 5px;


  -moz-border-radius: 5px;


  border-radius: 5px;


  


  /*Shadow*/


  -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);


  -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);


  box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);


}





#button1:hover {


  background-position: 0px 150px;


}


/*▲▲背景移動ボタンここまで▲▲*/


HTML※赤字の「#」にリンク先URL　青字の「タイトル」に任意の文字
<a href="#" id="button1" class="buttonText">タイトル</a>