Pusher part one

src/scss/global/_forms.scss

@@ -36,6 +36,14 @@ input[type="submit"] {
 		}
 	}
 
+	&.secondary {
+		background: #000000;
+		color: #FFFFFF;
+		&:hover {
+			background: lighten( #000000, 20% );
+		}
+	}
+
 	&.confirming,
 	&.destructive {
 		background: $red;
@@ -45,6 +53,20 @@ input[type="submit"] {
 		}
 	}
 
+	&.timing-out {
+		position: relative;
+		&::before {
+			@include animate_timeout(2s);
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			bottom: 0;
+			width: 0;
+			background: rgba(255,255,255,0.15);
+		}
+	}
+
 	&[disabled],
 	&[disabled="disabled"] {
 		background: $light_grey !important;

src/scss/global/_variables.scss

@@ -20,11 +20,22 @@ $red: #cf2d2d;
 	}
 }
 
-@mixin animate( $speed: 0.2s ){
-	-webkit-transition: all $speed ease-in-out;
-	   -moz-transition: all $speed ease-in-out;
-		 -o-transition: all $speed ease-in-out;
-		    transition: all $speed ease-in-out; 
+@mixin animate( $duration: 0.2s, $easing: ease-in-out ){
+	-webkit-transition: all $duration $easing;
+	   -moz-transition: all $duration $easing;
+		 -o-transition: all $duration $easing;
+		    transition: all $duration $easing; 
+}
+
+@keyframes fill_from_left {
+    from {	width: 0%; }
+    to {	width: 100%; }
+}
+
+@mixin animate_timeout( $duration: 0.2s ){
+    animation-name: fill_from_left;
+    animation-duration: $duration;
+    animation-timing-function: linear;
 }
 
 @mixin blur( $size: 10px ) {