カートボタンの動き

Question

こんにちは。

いつも大変お世話になっております。
ふと、画像ボタンにこんな動きがあったらクリックされるかな？と思い質問させて頂きました。

楽天などのカートボタンをこのように動きを付けることは可能ですか？
※詳細をチェック

https://smappy-if.com/companies/y_search?utm_campaign=Y_%E6%A0%BC%E5%AE%89SIM&utm_source=yahoo&utm_medium=sem&utm_term=YSS%E3%82%B9%E3%83%9E%E3%83%9B%20%E6%A0%BC%E5%AE%89%E6%AF%94%E8%BC%83_e&phone_prices[]=0..20000&month_limits[]=0...2&plan=0

動きを付けているのか？
それとも数個の画像を素早く切り替えているのか？
ふと興味があったので質問をさせて頂きました。

難しいようであれば大丈夫です。
クリックされやすいかな？と思い興味が出た次第です。

お時間があるときで構いません。
よろしくお願い致します。

Answer

ECマスターズの田中です。

＞動きを付けているのか？
＞それとも数個の画像を素早く切り替えているのか？

いただいたページの「詳細をチェック」ボタンは、
https://assets.smappy-if.com/assets/common/button_showy_small-437bd0ab1bf5bd8d2481.gif
上記URLのアニメーションGIF画像に、文字を載せて表示されております。

アニメーションGIFは、同じサイズ（横幅・高さ）のGIF画像を
予め決めたタイミングで切り替えて表示させる画像ファイルです。
素材のGIF画像を予めご用意の上、下記URLのようなWebサービスなどで作成できます。

アニメーションGIFを作ろう!
https://ao-system.net/gifanima/

アニメーションGIFファイルが完成しましたら、
下記スタイルシートを、ヘッダー・フッター・レフトナビ、もしくは共通説明文（大）に
挿入していただくことで、
買い物かごボタンをアニメーションGIFに変更することができます。

= この下の行から ====================

/* 買い物カゴ画像を変更 */
body div#rakutenLimitedId_aroundCart input.rCartBtn, body div#rakutenLimitedId_aroundCart input.rCartBtn[type="submit"] {
background: url(画像URL) no-repeat left top !important;
width: 画像の横幅px !important;
height: 画像の高さpx !important;
}

= この上の行まで ====================
※画像URL、画像の横幅（高さ）は、実際のURL、半角数字に置き換えてご利用ください。

Answer

田中様

こんにちは。
大変お世話になっております。

いつも迅速なご対応ありがとうございます。

なるほどです。
謎が解決してスッキリしました。
チャレンジしてみようと思います！

ありがとうございました。