コピペだけではうまくいかない

ボタンを設置して、hoverで動きをつけようと思い、どんなものがあるかを調べていたところ、惹かれるものを発見いたしましたので、自分のwebサイトに実装しようと試みた結果です。

こちらで紹介されている、4番目のものがカッコイイな、と心をくすぐられました。

コイツを自分のwebサイトに使いたかったんですが、背景色の変化を逆にしたいと思いました。つまり、グレー→ホワイトへ。

なので .button {} に background: #333; を追加し、.button::before {} の background を #fff に変更したのですが、うまくいかない。うまくいかないっていうのは、背景色がホワイトで固定されてしまい、変化するのが文字色だけになってしまう。

困ったなあと思い、いろいろ調べたり試したりしたところ、 .button {} に z-index: 1; を追加したらうまくいきました。重なりが上ですよ、ってやったらなんでうまくいくんでしょうか。動いてるからヨシ!としましたが、すっきりしないのでメモ。

あと、この前せっかく記事編集画面でcssをいじれるようにしたので、今回意気揚々と使ってみましたが、プレビューでは反映されていたのでウッキウキで投稿したら、実際の記事には反映されませんでした。なんでだろう。こういう記事を書くときはコードペンとか使った方がよさそうですね。まだ使ったことないので、そのうちやってみようと思います。便利なサービスには巻かれましょう。

かしこ

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