<button class="button">
	<span class="button__inner">
		<strong class="button__name">
			Stacy Strong
		</strong>
		<span class="button__details">
			Some details about Stacy
		</span>
	</span>
	<svg class="button__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
		<path fill="currentColor" d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
		<path fill="none" d="M0 0h24v24H0V0z"/>
	</svg>
</button>
<button class="button">
	<span class="button__inner">
		<strong class="button__name">
			Miles Elliot
		</strong>
	</span>
	<svg class="button__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
		<path fill="currentColor" d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
		<path fill="none" d="M0 0h24v24H0V0z"/>
	</svg>
</button>
<button class="button">
	<span class="button__inner">
		<strong class="button__name">
			Abraham Coleman
		</strong>
		<span class="button__details">
			Some details about Abraham
		</span>
	</span>
	<svg class="button__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
		<path fill="currentColor" d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
		<path fill="none" d="M0 0h24v24H0V0z"/>
	</svg>
</button>
:root {
	--dark: #111;
	--light: #eee;
}

.button {
	padding: 12px 20px;
	min-height: 60px;
	width: 300px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 2px solid var(--dark);
	background: transparent;
	cursor: pointer;
	text-align: left;
	
	&:hover,
	&:focus {
		background: var(--dark);
		color: var(--light);
	}
	
	&:not(:first-child) {
		margin-top: 12px;
	}
}

.button__inner {
	margin-right: 20px;
}

.button__details {
	display: block;
	margin-top: 4px;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.