Cacher is the code snippet organizer for pro developers

// Import Press.css separately

.wrapper {
	// The container should manipulate the size of the buttons
	margin: 0 auto;
	width: 60%;
}

div.press-group {
	// Flexbox for everything
	align-items: center;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	position: relative;
	.press {
		&:nth-child(1) {
			// First Button
			margin-right: 5px;
			order: 1;
			flex: 1 1 50%;
		}
		&:nth-child(2) {
			// Second Button
			margin-left: 5px;
			order: 3;
			flex: 1 1 50%;
		}
		&:nth-child(n+3) {
			// Hide any extra buttons that shouldn't be in a conditional
			display: none;
		}
	}
	&:before {
		align-items: center;
		background-color: #FFF;
		border-radius: 50%;
		box-sizing: border-box;
		content: attr(data-p-cond);
		display: flex;
		font-size: 0.8em;
		height: 30px;
		justify-content: center;
		left: 50%;
		order: 2;
		position: absolute;
		text-transform: uppercase;
		top: 50%;
		transform: translate(-15px, -50%);
		width: 30px;
	}
	&-ghost {
		&:before {
			background-color: orange;
			color: #FFF;
		}
	}
}

// All the boring stuff.

body {
	align-items: center;
	display: flex;
	flex-flow: column nowrap;
	height: 100vh;
	justify-content: center;
	width: 100%;
}

.wrapper {
	margin: 10px auto;
}

<div class="wrapper"><!-- Base Example -->
	<div class="press-group" data-p-cond="or">
		<button class="press press-red">Red Pill</button>
		<button class="press press-blue">Blue Pill</button>
	</div>
</div>

<div class="wrapper"><!-- Different Size Buttons -->
	<div class="press-group" data-p-cond="or">
		<button class="press press-xl press-red">Red Pill</button>
		<button class="press press-blue">Blue Pill</button>
	</div>
</div>

<div class="wrapper"><!-- Button Shapes and Effects -->
	<div class="press-group press-group-ghost press-red" data-p-cond="or">
		<button class="press press-ghost press-pill press-red">Red Pill</button>
		<button class="press press-ghost press-pill press-blue">Blue Pill</button>
	</div>
</div>