<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">

<div class="chat-balloon">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa nam fugit, nulla facilis doloremque atque sequi blanditiis accusamus molestias mollitia ratione, dolorum rem provident? Non, commodi. Iusto possimus fugit accusamus?
	</p>
	<div class="chat-balloon__buttons-container">
		<button class="chat-balloon__button--back chat-balloon__button">I don't want this :(</button>
		<button class="chat-balloon__button">Whatever</button>
		<button class="chat-balloon__button--next chat-balloon__button">Awesome!</button>
	</div>
</div>

body {
	background-color: #1E233C;
	font-family: 'Ubuntu';
	color: #fff;
}

.chat-balloon {
	background-color: rgba(255,255,255, .12);
	font-size: 14px;
	line-height: 1.5;
	border-radius: 15px;
	border-top-right-radius: 0;
	letter-spacing: 2px;
	margin: 15px;
	padding: 10px 40px;
	position: relative;
	text-align: justify;
	width: 500px;

	&:after {
		background-color: transparent;
		content: '';
		display: block;
		height: 0px;
		border-left: 15px rgba(255,255,255,.12) solid;
		border-top: 15px rgba(255,255,255,.12) solid;
		border-right: 15px transparent solid;
		border-bottom: 15px transparent solid;
		position: absolute;
		top: 0;
		right: -30px;
		width: 0px;
	}
	
	&__buttons-container {
		align-items: center;
		display: flex;
		justify-content: flex-end;
	}
	
	&__button {
		cursor: pointer;
		padding: 10px;
		border: 5px solid rgba(#1e233c, .15);
		box-shadow: 0 0 0 2px rgba(255,255,255,.3);
		background-color: rgba(#1e233c, .1);
		border-radius: 5px;
		margin: 10px;
		color: inherit;
		font-family: inherit;
		font-size: 16px;
		transition: .8s all;
		
		&:hover, &:focus {
			border: 5px solid rgba(#1e233c, .55);
			box-shadow: 0 0 0 2px rgba(255,255,255,.7);
			background-color: rgba(#1e233c, .5);
		}

		&--next {
			color: #0EC879;
			border: 5px solid rgba(#1e233c,.15);
			box-shadow: 0 0 0 2px rgba(#0EC879, .3);
	
			&:hover, &:focus {
				border: 5px solid rgba(#1e233c,.55);
				box-shadow: 0 0 0 2px rgba(#0EC879, .7);
			}
		}
		
		&--back {
			color: #FF5B5B;
			border: 5px solid rgba(#1e233c,.15);
			box-shadow: 0 0 0 2px rgba(#FF5B5B, .3);
	
			&:hover, &:focus {
				border: 5px solid rgba(#1e233c,.55);
				box-shadow: 0 0 0 2px rgba(#FF5B5B, .7);
			}
		}
	}
}