ボタンのラベルのテキスト

ボタンタイトルのテキスト

<div class="imageButton--type004">
	<a href="#">
		<figure class="button__image"><img src="画像のパス" width="" height="" alt="" /></figure>
		<p class="button__label">ボタンのラベルのテキスト</p>
		<p class="button__title">ボタンタイトルのテキスト</p>
	</a>
</div>
                

.imageButton--type004 {
	a{
		display:block;
		position:relative;
		z-index:1;
		>.button__image{
			overflow:hidden;
			img{
				width:100%;
				height:auto;
				transition: transform 0.3s ease;
				z-index:-1;
			}
		}
		&::before{
			content:" ";
			width:100%;
			height:100%;
			display:block;
			position:absolute;
			top:0;
			left:0;
			background-image:linear-gradient(0deg,rgba(0,0,0,1),rgba(0,0,0,0) 50%);
			opacity:.3;
			transition: opacity 0.3s ease-in-out;
			z-index:1;
		}
		&::after {
			content: "";
			width: 0.8em;
			height: 0.8em;
			display: block;
			background: url("/img/icon/arrow-circle-right.svg") no-repeat center center;
			background-size: 100% auto;
			filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
					hue-rotate(228deg) brightness(106%) contrast(101%);
			position: absolute;
			bottom:0.5em;
			right:0.5em;
	    	z-index:1;
		}
		>.button__label{
			position:absolute;
			top:0;
			right:0;
			background:#FFF;
			padding:0.3em 1em 0.5em;
			font-size:0.6em;
			line-height:1.1em;
			display:inline-block;
			z-index:1;
		}
		>.button__title{
			color:#FFF;
			font-size:0.95em;
			line-height:1.3em;
			font-weight:bold;
			margin-bottom:0;
			padding-right:1.5em;
			position:absolute;
			left:0.5em;
			bottom:0.5em;
			z-index:1;
		}
		&:hover{
			>.button__image img{
				transform: scale(1.1);
			}
			&::before{
				opacity:.2;
			}
		}
	}
}
@media print, screen and (min-width: 768px) {
	.imageButton--type004 a{
		>.button__label{
			font-size:0.8em;
		}
		>.button__title{
			font-size:1.3em;
		}
	}
}