webサイトのコーディングをしている時に、一番上に戻るボタンなど、fix（追従）ボタンを作ることもあると思います。コンバージョン（問い合わせや注文）に繋げるためには、目立つボタンを設置したり、問い合わせへの導線を分かりやすくするなどの工夫も必要かと思います。
そんな時に使える、初心者でも簡単に実装できるfix（追従）ボタンをご紹介します。
【初心者向け/html/css】コーディングに使えるボタンまとめ
こちらで紹介するボタンは他の記事同様、codepenというコーディングしながらプレビューを確認したり、作品として投稿できるツールを使用しています。
codepenに記載しているコードは適宜コピーして、色やフォントなど変更するなどして使用して頂いても問題ありません。
追従するだけのシンプルなfixボタン
こちらはスクロールに合わせて画面右下に追従してくるシンプルなfixボタンになります。「.box」要素はページのコンテンツ部分（グレー背景）になります。ご自身のページに合わせて変更してください。
追従させるための記述箇所の説明は下記の通りです。
.fix-btn{
position:fixed; /*配置設定-fixed指定で追従*/
z-index:1; //前面・背面位置の設定
right:20px; //コンテンツの表示座標・位置※bottomも同様
bottom:20px;
}fixedを指定した要素にjavascriptなどで特別なイベントをつけていない場合は、上記のようにシンプルに画面スクロールに合わせて追従するボタンが作成できます。
一定時間ごとに動くfixボタン
基本的なスタイルは一つ目のボタンと同じですが、こちらのボタンは一定時間ごとにアニメーションするような記述を追加しています。常に動くアニメーションなので、スクロール中でもアニメーションは実行されます。cssのアニメーションの記述部分の説明は下記の通りです。
※下記「アニメーション名」は同一の名前にしてください。同一にしていないとアニメーションが動作しません。
.fix-btn{
animation：アニメーション名 アニメーションの所要時間 アニメーションの再生回数;
}
@keyframes アニメーション名{
アニメーションの動き詳細
}最初のうちは、参考のサイトなどのアニメーションをコピーして少しずつ変更しながら、自身の納得のいくアニメーションを作成する方法が良いと思います。CSSアニメーションは設定次第で種類が無限大にあります。
設定が豊富にあるため苦手意識を持っている方も多いと思いますが、CSSアニメーションの作成に慣れるとかなりサイト構築の幅が広がります。
hover（ホバー）したらアニメーションを実行するfixボタン
基本的な動きは二つ目のボタンと同様ですが、ページ読み込み後、すぐにアニメーションを実行するのではなく、ボタンをホバーした時のみ、アニメーションを実行するように変更しています。アニメーションの繰り返しは「infinite」にしているので、ホバーしている間は指定したアニメーションがずっと実行されます。
.fix-btn:hover{
animation:move 4s infinite;
}上記のように「クラス名:hover」セレクタで指定すれば、ホバーした時のみアニメーションを実行させることができます。サイトに少し遊びを入れたい時などにも良いと思います。
まとめ
今回はfix（追従）ボタンの作り方、アニメーションを使用したカスタマイズ方法を紹介しました。javascriptを使わない、または、クラス付与のみ行うだけでも、工夫次第で凝ったボタンを作ることは可能ですので、是非色々試しながらチャレンジしてみてください。
前へ
