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

rich_buttonCSS



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

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




①ボタンを作成します。

<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を設定しておきます。

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

リッチボタン





connaiconnai

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

	.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>

コメント

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