Помогите сделать сложную кнопку

.wrapper { 
	width: 500px; 
	padding: 20px; 
	margin: 0 auto; 
	margin-top: 50px; 
	font-family: 'Arial', sans-serif; 
	display: flex; 
	flex-direction: row; 
	justify-content: center; 
} 
 
.left, .right { 
	width: 50%; 
	text-align: center; 
} 
 
.left span, .right span { 
	color: #fff; 
} 
 
.left .button { 
	border-right: 1px solid #fff; 
	border-radius: 30px 0 0 30px; 
} 
 
.right .button { 
	border-left: 1px solid #fff; 
	border-radius: 0 30px 30px 0; 
} 
 
.button { 
	width: 100%; 
	padding: 15px 0; 
	background: #ecd114; 
	text-transform: uppercase; 
	text-decoration: none; 
	box-sizing: border-box; 
	font-weight: bold; 
	display: block; 
	color: #000; 
} 
 
.button, .play { 
	transition: .25s background ease; 
}	 
 
.button:hover, .play:hover { 
	background: #ecc114; 
} 
 
.or-and-play { 
	width: 138px; 
	height: 50%; 
	margin: 0 auto; 
	position: relative; 
	background: #ecd114; 
	font-weight: bold; 
} 
 
.or-and-play:before, .or-and-play:after { 
	content: ''; 
	width: 46px; 
	height: 100%; 
	position: absolute; 
	background: #fff; 
} 
 
.or-and-play:before { 
	border-radius: 0 25px 0 0; 
	left: 0; 
} 
 
.or-and-play:after { 
	border-radius: 25px 0 0 0; 
	right: 0; 
} 
 
.or-and-play span, .play { 
	position: absolute; 
	transform: translate(-50%, 0); 
	text-transform: uppercase; 
} 
 
.or-and-play span { 
	z-index: 2; 
	font-size: 14px; 
	left: 50%; 
	top: -50%; 
} 
 
.play { 
	width: 46px; 
	padding: 15px 0; 
	line-height: 1; 
	background: #ecd114; 
	text-decoration: none; 
	border-radius: 50%; 
	color: #000; 
	top: 10%; 
}

<div class="wrapper"> 
	<div class="left"> 
		<a href="#" class="button">Представить</a> 
	</div> 
	<div class="right"> 
		<a href="#" class="button">Наша презентация <span>PDF</span></a> 
		<div class="or-and-play"> 
			<span>или</span> 
			<a href="#" class="play">&#9658;</a> 
		</div> 
	</div> 
</div>