Add green button

src/App.vue

@@ -27,7 +27,7 @@
 						width='100%'
 					>
 					</fancy-input>
-					<button class='button' @click='signup'>
+					<button class='button button--green' @click='signup'>
 						Sign up
 					</button>
 					<button class='button' @click='cancel'>
@@ -51,7 +51,7 @@
 						width='100%'
 					>
 					</fancy-input>
-					<button class='button' @click='signup'>
+					<button class='button button--green' @click='signup'>
 						Log in
 					</button>
 					<button class='button' @click='cancel'>
@@ -217,6 +217,20 @@
 			&:hover { border-color: $color__orange--darker; }
 			&:active { border-color: $color__orange--darkest; }
 		}
+		@at-root #{&}--green {
+			background-color: $color__green--primary;
+			color: #fff;
+			border-color: $color__green--darker;
+
+			&:hover { 
+				border-color: $color__green--darker;
+				background-color: rgba(75, 171, 79, 0.86);
+			}
+			&:active {
+				border-color: $color__green--darker;
+				background-color: $color__green--darkester;
+			}
+		}
 	}
 
 	.input {

src/assets/scss/variables.scss

@@ -21,6 +21,11 @@ $color__orange--primary: #F57C00;
 $color__orange--darker: #EF6C00;
 $color__orange--darkest: #de621c;
 
+$color__green--primary: rgba(76, 175, 80, 0.86);
+$color__green--darker: #43A047;
+$color__green--darkest: #1B5E20;
+$color__green--darkester: rgba(79, 152, 82, 0.84);
+
 
 @mixin text($family: $font--role-default, $size: 1rem, $weight: 300) {
 	font-family: $family;