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