CUSTOM BUTTONS

CUSTOM BUTTONS

HTML

<section class="content">
        <header class="main-header"><h2>SLIDE IN/OUT BUTTONS</h2></header>
				<div class="box bg-1">
					<button class="button button--simple button--border-thin button--text-thick button--text-upper button--size-s" data-text="Get Started!"><span>Design Your Own</span></button>
					<button class="button button--simple button--border-thin button--text-thick button--text-upper button--size-s" data-text="Fill out the form"><span>Let us design for you</span></button>
					<button class="button button--simple button--border-thin button--text-thick button--text-upper button--size-s" data-text="New products"><span>Enter Shop</span></button>
				</div>
				<div class="box bg-2">
					<button class="button button--simple button--border-medium button--text-thin button--size-l button--inverted" data-text="Book Appointment"><span>Book Appointment</span></button>
					<button class="button button--simple button--border-medium button--text-thin button--size-l button--inverted" data-text="View Catalogue"><span>View Catalogue</span></button>
					<button class="button button--simple button--border-medium button--text-thin button--size-l button--inverted" data-text="Email Us<"><span>Email Us</span></button>
				</div>
				<div class="box bg-3">
					<button class="button button--simple button--border-thick button--text-thick" data-text="Send Message"><span>Send Message</span></button>
					<button class="button button--simple button--border-thick button--text-thick" data-text="Request a Quote"><span>Request a Quote</span></button>
					<button class="button button--simple button--border-thick button--text-thick" data-text="Get Started!"><span>Get Started</span></button>
				</div>
			</section>

CSS

@import url('http://fonts.googleapis.com/css?family=Raleway:200,300,400,500,600');
@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,700|Montserrat:400,700');
body {
	background: #cfd8dc;
	color: #37474f;
	font-weight: 400;
	font-size: 1em;
	font-family: 'Montserrat', sans-serif;
}

*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cf:before,
.cf:after {
	content: '';
	display: table;
}
.cf:after {
	clear: both;
}
.support {
	font-weight: bold;
	padding: 2em 0 0 0;
	font-size: 1.4em;
	color: #ee2563;
	display: none;
}
a {
	color: #7986cb;
	text-decoration: none;
	outline: none;
}
a:hover,
a:focus {
	color: #3f51b5;
}
.hidden {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	pointer-events: none;
}

.box {
	padding: 4.5em 0;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	justify-content: center;
}


.content {
	padding: 1em 1em 1em;
	z-index: 1;
	max-width: 1000px;
	margin: 0 auto;
}
.content h2 {
	margin: 0 0 2em;
}
.content p {
	margin: 1em 0;
	padding: 0 0 2em;
	font-size: 0.85em;
}

.container {
	margin: 0 auto;
	text-align: center;
	overflow: hidden;
}

.main-header {
	padding: 1em 50px 1em;
	letter-spacing: -1px;
}

.box {
	padding: 4.5em 0;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	justify-content: center;
}

.bg-1 {
	background: #ECEFF1;
	color: #37474f;
}
.bg-2 {
	background: #F2A477;
	color: #ECEFF1;
}
.bg-3 {
	background: #37474f;
	color: #fff;
}

/* Common button styles */
.button {
	float: left;
	min-width: 150px;
	max-width: 250px;
	display: block;
	margin: 1em;
	padding: 1em 2em;
	border: none;
	background: none;
	color: inherit;
	vertical-align: middle;
	position: relative;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	-moz-osx-font-smoothing:...