光るボタンの作り方と注意点

CSS
2023.01.10
もち
もち

光るボタンの作り方と

ボタンに border-rasius を指定したときの注意点について

お伝えします！

光るボタンの作り方

See the Pen Untitled by mothihuku (@mothi002) on CodePen.

この光るボタンは ryohei さんのサイトを参考にしています。

【CSS】キラッと光るボタンの作り方！目立つボタンでクリック率を向上させよう
本記事では、CSSだけでキラッと光るボタンの作り方をご紹介しています。 商品やサービスの紹介などで「詳細はこちら」や「公式サイトはこちら」というようなボタンのアニメーションとしてキラッと光るボタンを見
into-the-program.com

アイコン用のクラスを後からつけやすくするために、

擬似要素ではなく、span を子要素にいれて、それを光らせてます。

アイコンの用のクラスって、なんか擬似要素を使っているイメージがあるので。。。

アイコンをつける必要がないなら、

擬似の方で光らせたほうがいいのかなと思います。

See the Pen Untitled by mothihuku (@mothi002) on CodePen.

アイコン用のクラスを追加してます。span を使ったので、before、 after どちらも使えます。

border-radius をつけたときの注意点

ボタンに border-radius をつけ、子要素(もしくは、擬似要素)の光をはみ出せないために

overflow:hidden; を指定すると、

本来なら、ボタンに沿って光るはずのところを

safari では、なぜか border-radius で丸みを帯びた部分だけ overflow:hidden; が適用されず

光がボタンからはみ出ているように見えてしまいます。

枠線とボタンの隙間部分に光がはみ出してしまいます。

背景が白ければ、光も白っぽいので、特に何も気にならないのですが、

背景が黒かったりすると、はみ出て目立ちます。

解決策は、下記のサイトが参考になりました。

Safari や iOS 上のブラウザで border-radius で子要素をマスクできない問題
Safari で HTML を閲覧した際に、親要素に と を設定してあるのに子要素が の範囲をはみ出して表示されてしまう問題についてです。 追記: 親要素に を設定している前提の説明が抜けてしまっていたのでタイトルと本文を修正しました（コメントいただいた方ありがとうござ…
gotohayato.com

難しいことが書かれていたりしますが、上記のサイトによると、

この現象はバグのようで、解決策が用意されているみたいです。

  1. ボタンに isolation: isolate; を指定する。
  2. position(static以外なら何でも) と z-index の指定する。
    これは、ボタンか子要素のどちらかにつけると解決しました。
  3. ボタンに transform: translateZ(0); を指定する。

これのうち、どれか一つ指定すると解決するみたいです。

もち
もち

今回はここまでになります。

最後まで見てくださりありがとうございました！

この記事がお役に立てばうれしいです！

タイトルとURLをコピーしました