feat: add active styling to buttons (#545)

meetalva · Jun 10, 2018 · 46546b8 · 46546b8
1 parent d818c61
commit 46546b8
Showing 1 changed file with 18 additions and 2 deletions.
diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
@@ -38,13 +38,23 @@ const StyledButton = styled.button`
 					background: transparent;
 					border: 1px solid ${Color.Grey50};
 					color: ${Color.Grey50};
+
+					&:active {
+						border-color: ${Color.Black};
+						color: ${Color.Black};
+					}
 				`;
 			case ButtonOrder.Primary:
 			default:
 				return css`
-					background: ${Color.Blue};
-					border: 1px solid ${Color.Blue};
+					background: ${Color.Blue20};
+					border: 1px solid ${Color.Blue20};
 					color: ${Color.White};
+
+					&:active {
+						background: ${Color.Blue};
+						border-color: ${Color.Blue};
+					}
 				`;
 		}
 	}};
@@ -77,6 +87,12 @@ const StyledButton = styled.button`
 			? `
 				background: ${Color.White};
 				border-color: ${Color.White};
+
+				&:active {
+					background: ${Color.White};
+					border-color: ${Color.White};
+					opacity: 0.8;
+				}
 			`
 			: ''};
 	${(props: ButtonProps) =>