1 files changed, 137 insertions, 0 deletions
diff --git a/plugins/jetpack/scss/atoms/_buttons.scss b/plugins/jetpack/scss/atoms/_buttons.scss
new file mode 100644
index 00000000..45825f97
--- /dev/null
+++ b/plugins/jetpack/scss/atoms/_buttons.scss
@@ -0,0 +1,137 @@
+// ==========================================================================
+// Buttony button buttons
+// ==========================================================================
+
+.button,
+.download-jetpack {
+	transition: all .1s ease-in-out;
+}
+.jp-button {
+	display: inline-block;
+	position: relative;
+	padding: em(10px, 13px) em(19px, 13px);
+	color: #efefef;
+	font-weight: bold;
+	font-size: 0.9285714286em; // 13/14
+	line-height: 1;
+	text-shadow: 0 1px 1px rgba(0,0,0,.2);
+	background: #6f7476;
+	border-radius: 3px;
+
+	&:visited {
+		color: #efefef;
+	}
+	&:hover,
+	&:focus {
+		color: #fff;
+		background: #57972d;
+	}
+	&:active {
+		background: #57972d;
+		opacity: 0.8;
+	}
+}
+.jp-button--settings {
+	@extend .jp-button;
+	background: #93b45f;
+	color: #e8eedf;
+
+	&:visited {
+		color: #e8eedf
+	}
+	&:hover,
+	&:focus {
+		background: #9fbd72;
+		color: #fff;
+	}
+	&.current {
+		background: #3c6621;
+		color: #fff;
+		box-shadow:
+			inset 0 2px 0 #365A1F,
+			inset 0 1px 3px #3c6621;
+	}
+}
+.download-jetpack {
+	display: inline-block;
+	position: relative;
+	padding: em(18px, 28px) em(50px, 46px) em(15px, 28px);
+	color: #fff;
+	font-weight: 400;
+	font-size: 20px;
+	line-height: 1;
+	background: #518d2a;
+	z-index: 3;
+	border-radius: 6px;
+	box-shadow:
+		0 6px 0 #3e6c20,
+		0 6px 3px rgba(0,0,0,.4);
+
+	&:visited {
+		color: #fff;
+	}
+	&:hover,
+	&:focus {
+		color: #fff;
+		background: #57972d;
+		box-shadow:
+			0 6px 0 #3e6c20,
+			0 6px 3px rgba(0,0,0,.4);
+	}
+	&:active {
+		top: 6px;
+		box-shadow:
+			0 0px 0 #3e6c20,
+			0 0 0 rgba(0,0,0,.4);
+
+		&:after {
+			// fixes buggy clicks
+			top: -6px;
+		}
+	}
+	&:before {
+		content: '';
+		display: inline-block;
+		position: relative;
+		top: -2px;
+		margin-right: 13px;
+		width: 30px;
+		height: 30px;
+		vertical-align: middle;
+		background: url('../images/connect-plug.svg') center center no-repeat;
+		background-size: 100%;
+	}
+	&:after {
+		// fixes buggy clicks
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+	}
+	@include breakpoint(large-desktop){
+		font-size: em(18px);
+
+		&:before {
+			top: -1px;
+			width: 23px;
+			height: 23px;
+		}
+	};
+	@include breakpoint(desktop){
+		&:active {
+			top: 0;
+		}
+	};
+	@include breakpoint(large-phone){
+		font-size: em(17px);
+		font-weight: 600;
+
+		&:before {
+			width: 19px;
+			height: 19px;
+			margin-right: 9px;
+		}
+	};
+}