【CSS3】hoverしたら左から色を変更するアニメーション付きボタン
hoverしたら空のspanタグが移動してくる動作でアニメーションを表現。
※今回の記事はudemyの動画を参考に書き、備忘録的な動機で投稿しています。
index.html
<divid="container"><buttonclass="btn slide-bg"><span></span>Button</button></div>style.css
#container{text-align:center;}.btn{background-color:#ffff;color:black;border:1pxsolidblack;padding:10px40px;margin:50px0;font-weight:600;cursor:pointer;-webkit-transition:all0.3s;transition:all0.3s;z-index:1;}.btn.slide-bg{position:relative;overflow:hidden;}.btn.slide-bg:hover{color:#ffff;}.btn.slide-bg:hoverspan{-webkit-transform:none;transform:none;z-index:-1;}.btn.slide-bgspan{display:inline-block;width:100%;height:100%;background-color:#000;position:absolute;top:0;left:0;-webkit-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:-webkit-transform0.3s;transition:-webkit-transform0.3s;transition:transform0.3s;transition:transform0.3s,-webkit-transform0.3s;}疑似要素を使う場合
index.html
<divid="container"><buttonclass="btn slide-bg">Button</button></div>style.css
#container{text-align:center;}.btn{background-color:#ffff;color:black;border:1pxsolidblack;padding:10px40px;margin:50px0;font-weight:600;cursor:pointer;-webkit-transition:all0.3s;transition:all0.3s;z-index:1;}.btn.slide-bg{position:relative;overflow:hidden;}.btn.slide-bg:hover{color:#ffff;}.btn.slide-bg:hover::before{-webkit-transform:none;transform:none;z-index:-1;}.btn.slide-bg::before{content:'';display:inline-block;width:100%;height:100%;background-color:#000;position:absolute;top:0;left:0;-webkit-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:-webkit-transform0.3s;transition:-webkit-transform0.3s;transition:transform0.3s;transition:transform0.3s,-webkit-transform0.3s;}