WordPressランディングページで使える訴求力のあるデザインボタン(レスポンシブ)

jQueryとCSSでクラスを指定するだけで画像に矢印が付いてホバー時のアニメーションもつけてくれる物を作成して見ました。

 

green-btn

使い方

投稿画面で画像を挿入する

「メディアを追加」⇒「画像選択」⇒「投稿に挿入」

WS000191

WS000192

 

アニメーションを動かす為のクラスと指定

WS000193

「挿入された画像をクリックすると鉛筆(編集)マークのが出るのでそちらをクリック

WS000194

開いたポップアップの下部にある「上級者向け設定」のプルダウンをクリックし開く

WS000195

「リンクCSSクラス」のテキストボックスに「anihv」(animation-hoverの略です)と記入し編集を完了しあとは投稿するだけです。

 

なので画像に指定しているリンクに対してクラス「anihv」を指定するだけでアニメーションが動くと言う物ですね(^_^)

 

Share on Google+0Tweet about this on Twitter0Share on Facebook0