横からひゅっと出てくるアニメーションのあるボタンを作りたくてCSSを書いてたのですが、悩みに悩んでやっとできたので記録します。floatとz-indexでハマってしまったのでそちらも最後に書いています。
ちなみにこちらのボタンです。
先に上記のコードを記載します。
<ahref="#"class="button"><spanclass="btn-text">Learn more →</span></a>.button{display:block;text-decoration:none;border-bottom:1pxsolid#55c57a;width:12rem;height:4rem;line-height:4rem;text-align:center;background:transparent;font-size:1.6rem;}.btn-text{display:block;width:100%;height:100%;color:#55c57a;position:relative;z-index:1;}.btn-text:before{content:"";position:absolute;top:0;bottom:0;width:0;display:block;background:#55c57a;transition:.5s;z-index:-1;}.btn-text:hover:before{width:100%;}.btn-text:hover{color:white;}簡単に手順を記載
１、aタグ(.button)に、widthやheightを設定してボタンの枠を作ります。
２、aタグの子要素のspanタグ(.btn-text)に、テキストカラーだけ置いておきます。widthやheightは100%に。
３、バックグラウンドカラーを変える仕込みとして、before疑似要素で.btn-textにwidth0%を配置しておきます。
４、マウスオーバーしたら、３(.btn-textのbefore疑似要素)のwidthが100%になるようにします。アニメーションがかかる対象のものにtransitionプロパティを記載しておきましょう！z-indexは-1に。
５、.btn-textにマウスオーバーしたらテキストカラーが白に変わるように記載しておきます。
イメージ
つまずいたこと（floatの子孫要素にz-indexを指定する場合）
z-indexでつまずきました。
.btn-text:beforeは.btn-textの子要素になるので、z-index指定をしない状態だとマウスオーバーした時に.btn-text:beforeが一番上に来て、.btn-text:hoverで指定した白のテキストカラーが隠れてしまいました。
そこで.btn-text:beforeにz-index: -1;を指定したのですが、今度はどの要素よりも緑のバックグラウンドカラーが後ろに行ってしまい、、テキストカラーは白が見えるもののバックグラウンドカラーが見えず。
親要素を辿ると、２カラムにしたかったのでfloat指定をしてたんですよね。
調べると、float指定をした子孫要素は重なり順で結構手前に来るみたいで、、
（だから.btn-text:beforeにz-index: -1;を指定するとバックグラウンドが見えなくなってしまったのかな？）
結果.btn-textにz-index: 1を指定してあげるとうまくいきました。
ぼんやりとなんとなく理解できるけど、細かいところはよくわからず、、すみません(><)
ですがz-indexでつまずいた方、先祖要素にfloatがあるかを疑ってみて、その場合z-indexを指定したその親にもz-indexを指定するとなんとかなるかも...？？というTIPSでしたmm
