CSS

スライドアニメーションのボタン

ウェブページに組み込みできる作成例。
ホバーでスライドアクションのリンクボタン。CSSのみで実現。JavaScriptは使用しません。

参加を申し込む
参加を申し込む
人生をやり直す
よろしいですか?
使用方法
[HTML]
<style>
div.slidebutton {
	--color-fore: #b12;
	--color-back: #fff;
	--color-back-text: #111;
	text-decoration: none;
	margin-left: 20px;
	background-color: var(--color-back);
	border-radius: 8px;
	width: 200px;
	height: 50px;
	display: grid;
	user-select: none;
	cursor: pointer;
	&:hover {
		> .layer2 {
			width: 193px;
		}
		> .layer3 {
			margin-left: 152px;
		}
	}
	> .layer1 {
		grid-area: 1/1/2/2;
		padding-top: 17px;
		padding-left: 70px;
		font-size: 0.9rem;
		line-height: 1;
		font-weight: 600;
		color: var(--color-back-text);
	}
	> .layer2 {
		grid-area: 1/1/2/2;
		background-color: var(--color-fore);
		border-radius: 5px;
		padding-top: 14px;
		padding-left: 15px;
		margin: 3px;
		height: 44px;
		width: 0;
		white-space: nowrap;
		overflow: hidden;
		transition: width 0.2s;
		font-size: 0.9rem;
		line-height: 1;
		font-weight: 600;
		color: var(--color-back);
	}
	> .layer3 {
		grid-area: 1/1/2/2;
		background-color: var(--color-fore);
		border-radius: 5px;
		padding-top: 10px;
		padding-left: 15px;
		margin: 3px;
		width: 43px;
		transition: margin-left 0.2s;
		> svg {
			fill: var(--color-back);
		}
	}
}
</style>

<div class="slidebutton">
	<div class="layer1">参加を申し込む</div>
	<div class="layer2">参加を申し込む</div>
	<div class="layer3"><svg xmlns="http://www.w3.org/2000/svg" width="16px" height="13px"><path d="M9.41,0.37L7.57,2.22l2.97,2.98H0.46V7.8h10.07l-2.97,2.97l1.84,1.85l6.13-6.13L9.41,0.37z"/></svg></div>
</div>

<div class="slidebutton">
	<div class="layer1">人生をやり直す</div>
	<div class="layer2">よろしいですか?</div>
	<div class="layer3"><svg xmlns="http://www.w3.org/2000/svg" width="16px" height="13px"><path d="M9.41,0.37L7.57,2.22l2.97,2.98H0.46V7.8h10.07l-2.97,2.97l1.84,1.85l6.13-6.13L9.41,0.37z"/></svg></div>
</div>
サンプルはdivタグですが、aタグに変えればリンクになります。
2024年3月初版
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。