wWgYRe

index.html

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<div class="top-bar">
	<div class="top-bar--inner">
		<div class="brand">

		</div>
		<div class="button sel">
			<div class="button--inner">
				<span></span>
				<strong>Follow Me (F)</strong>
			</div>
		</div>
		<div class="button">
			<div class="button--inner">
				<span></span>
				<strong>Boost (X)</strong>
			</div>
		</div>
	</div>
</div>

style.css

.top-bar {
	position: absolute;
	top: 0; right: 0; left: 0; bottom: 0;
	font-family: 'Open Sans';
}

.top-bar--inner {
	width: 100%;
	max-width: 1400px;
	height: 80px;
	background-color: rgba(0,0,0,0.2);
	margin: 0 auto;
}

.brand {
	
}

.button {
	text-align: center;
	color: #fff;
	height: 80px;
	display: table;
	vertical-align: middle;
	padding: 0 20px;
	background-color: rgba(0,0,0,0.2);
	cursor: pointer;
	float: left;
	transition: background 300ms ease;
}

.button--inner {
	display: table-cell;
	vertical-align: middle;
	height: 80px;
}

.button span {
	display: block;
	height: 20px;
	width: 20px;
	margin: 0 auto;
	background-color: #ff4e4e;
	border-radius: 20px;
	border: 2px solid #fff;
}

.button.sel span {
	background-color: #96ff4e;
}

.button:hover {
	background-color: rgba(0,0,0,0.1);
}

.button strong {
	display: block;
	padding-top: 4px;
}

wWgYRe.markdown

wWgYRe

A Pen by Harry Newsome on CodePen.

License.