2020/12/7クライアントからの「高級な感じにしてほしい」というざっくりな要望に応えるための要素の一つとして、ボタンをホバーした時に文字に対してアンダーラインが現れるというボタンを用意することにしました。(以下このボタンをリッチボタンと呼ぶことにします)このリッチボタンをCSSで実装する方法についてデモを交えながら記述していきます。14px;}.btn:hover{cursor:pointer;}</style>ボタンができました。.3s;}テキストに対して下側に横幅0のアンダーラインを置いております。.3sを設定しておきます。ホバーしても何も起きません。100%;}ホバーした時に2で作った横幅0のアンダーラインを100%にすることで左から右にゆっくり現れるアンダーラインができました。.ritch::afterは「btnクラスをホバーした時、ritchクラスのafter要素に処理を加える」という事を表しています。こちらホバーするとアンダーラインが現れると思います。リッチボタン以上、ボタンホバー時文字にアンダーラインが左から右に現れるリッチボタンを実装する方法でした。最後にコードを全文載せておきます。Posts関連記事は見つかりませんでした。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。views2021/1/202023/5/13タイトルとURLをコピーしました。