【CSS】ボタンホバー時文字にアンダーラインが左から右に現れるリッチボタンを実装する

クライアントからの「高級な感じにしてほしい」というざっくりな要望に応えるための要素の一つとして、ボタンをホバーした時に文字に対してアンダーラインが現れるというボタンを用意することにしました。（以下このボタンをリッチボタンと呼ぶことにします）

このリッチボタンをCSSで実装する方法についてデモを交えながら記述していきます。

Contents

①ボタンを作成します
②ホバー前のアンダーラインを定義します
③ボタンホバー時アンダーラインを出す
ソースコード全文

①ボタンを作成します

<div class="btn"><span class="ritch">リッチボタン</span></div>
<style>
	.btn{
		border:1px solid #000;
		display:inline-block;
		padding:10px 14px;
	}	
	.btn:hover{
		cursor:pointer;
	}
</style>

ボタンができました。

リッチボタン

②ホバー前のアンダーラインを定義します

.ritch{
    position:relative;
}
.ritch::after {
    content: '';
    position: absolute;
    bottom:-2px;
    left: 0;
    width: 0%;
    height: 1px;
    background: #000;
    transition: all .3s;
}

テキストに対して下側に横幅0のアンダーラインを置いております。
左から右にゆっくり現れる下線を表現したいのでtransition: all .3sを設定しておきます。

まだホバーしても何も起きません。

リッチボタン

③ボタンホバー時アンダーラインを出す

.btn:hover .ritch::after {
    width: 100%;
}

ホバーした時に②で作った横幅0のアンダーラインを100%にすることで
左から右にゆっくり現れるアンダーラインができました。
.btn:hover .ritch::afterは「btnクラスをホバーした時、ritchクラスのafter要素に処理を加える」という事を表しています。

こちらホバーするとアンダーラインが現れると思います。

リッチボタン

以上、ボタンホバー時文字にアンダーラインが左から右に現れるリッチボタンを実装する方法でした。

ソースコード全文

最後にコードを全文載せておきます。

<div class="btn"><span class="ritch">リッチボタン</span></div>

<style>
	body{
        padding:300px;
	}
	.btn{
        border:1px solid #000;
        display:inline-block;
        padding:10px 14px;
	}	
	.btn:hover{
        cursor:pointer;
	}
	.ritch{
        position:relative;
	}
	.ritch::after {
        content: '';
        position: absolute;
        bottom:-2px;
        left: 0;
        width: 0%;
        height: 1px;
        background: #000;
        transition: all .3s;
	}
	.btn:hover .ritch::after {
        width: 100%;
	}
</style>