良い感じのフッター固定CTAをJqueryとCSSだけで実装する

最近はフッターにCTAを設置することが増えてきましたよね。
昔は右上に電話番号と問い合わせリンクを配置するのがセオリーだったのですが、
ヘッダーをスッキリさせたい場合が多かったり、なんか野暮ったい感じがするからでしょうかね。

ということで、今回は汎用性の高いフッター固定のCTAを作ってみました。
やりたいこととしては

・毎度画像を作るのは大変なので、CSSだけでデザインは調整したい
・スクロールしたら下からニュルっと出てくる感じ
・レスポンシブ

であればステキかなと思ったので、こんな感じです。

See the Pen
zYvNWgZ
by mako110 (@mako110)
on CodePen.

最近はLINE登録に促すところも増えてきたのでLINEボタン入れてますが、
別にLINEでなくても良いですし、電話とメールだけでも良いかもしれませんね。

一応、デモはこんな感じです↓

https://mako110.com/sample/footer_cta.html

どなたかの参考にあれば幸いです。
それでは。

役に立った 0

役に立ったボタン設置してみました。是非押していってくださいm(__)m(2020年4月17日設置)

この記事を書いた人

mako110

原宿でWEBディレクターをやっています。
WEB業界に携わって約15年。独立して7年目です。
自分らしく、働きやすく、周りの人の役に立つ。
そんな仕事をゆるゆるとやっています。