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