Add more colors to button-colors

Borderliner · Feb 13, 2017 · 902bdc6 · 902bdc6
1 parent a5b660a
commit 902bdc6
Showing 1 changed file with 150 additions and 26 deletions.
diff --git a/src/css/plugins/button-colors.css b/src/css/plugins/button-colors.css
@@ -60,33 +60,157 @@ input[type="button"].crimson:active {
   border-color: #6f0606;
 }
 
-/* Pink button */
-a.button.pink,
-button.pink,
-input[type="submit"].pink,
-input[type="reset"].pink,
-input[type="button"].pink {
-  border: 2px #bf21d0 solid;
-  color: #bf21d0;
-}
-
-/* Pink button's hover */
-a.button.pink:hover,
-button.pink:hover,
-input[type="submit"].pink:hover,
-input[type="reset"].pink:hover,
-input[type="button"].pink:hover {
-  background-color: #bf21d0;
-  border-color: #bf21d0;
+/* Purple button */
+a.button.purple,
+button.purple,
+input[type="submit"].purple,
+input[type="reset"].purple,
+input[type="button"].purple {
+  border: 2px #9C27B0 solid;
+  color: #9C27B0;
+}
+
+/* Purple button's hover */
+a.button.purple:hover,
+button.purple:hover,
+input[type="submit"].purple:hover,
+input[type="reset"].purple:hover,
+input[type="button"].purple:hover {
+  background-color: #9C27B0;
+  border-color: #9C27B0;
+  color: #fff;
+}
+
+/* Purple button's active */
+a.button.purple:active,
+button.purple:active,
+input[type="submit"].purple:active,
+input[type="reset"].purple:active,
+input[type="button"].purple:active {
+  background-color: #7B1FA2;
+  border-color: #7B1FA2;
+}
+
+/* Lime button */
+a.button.lime,
+button.lime,
+input[type="submit"].lime,
+input[type="reset"].lime,
+input[type="button"].lime {
+  border: 2px #CDDC39 solid;
+  color: #CDDC39;
+}
+
+/* Lime button's hover */
+a.button.lime:hover,
+button.lime:hover,
+input[type="submit"].lime:hover,
+input[type="reset"].lime:hover,
+input[type="button"].lime:hover {
+  background-color: #CDDC39;
+  border-color: #CDDC39;
+  color: #000;
+}
+
+/* Lime button's active */
+a.button.lime:active,
+button.lime:active,
+input[type="submit"].lime:active,
+input[type="reset"].lime:active,
+input[type="button"].lime:active {
+  background-color: #9E9D24;
+  border-color: #9E9D24;
+}
+
+/* Brown button */
+a.button.brown,
+button.brown,
+input[type="submit"].brown,
+input[type="reset"].brown,
+input[type="button"].brown {
+  border: 2px #8D6E63 solid;
+  color: #8D6E63;
+}
+
+/* Brown button's hover */
+a.button.brown:hover,
+button.brown:hover,
+input[type="submit"].brown:hover,
+input[type="reset"].brown:hover,
+input[type="button"].brown:hover {
+  background-color: #8D6E63;
+  border-color: #8D6E63;
+  color: #fff;
+}
+
+/* Brown button's active */
+a.button.brown:active,
+button.brown:active,
+input[type="submit"].brown:active,
+input[type="reset"].brown:active,
+input[type="button"].brown:active {
+  background-color: #6D4C41;
+  border-color: #6D4C41;
+}
+
+/* Space button */
+a.button.space,
+button.space,
+input[type="submit"].space,
+input[type="reset"].space,
+input[type="button"].space {
+  border: 2px #607D8B solid;
+  color: #607D8B;
+}
+
+/* Space button's hover */
+a.button.space:hover,
+button.space:hover,
+input[type="submit"].space:hover,
+input[type="reset"].space:hover,
+input[type="button"].space:hover {
+  background-color: #607D8B;
+  border-color: #607D8B;
   color: #fff;
 }
 
-/* Pink button's active */
-a.button.pink:active,
-button.pink:active,
-input[type="submit"].pink:active,
-input[type="reset"].pink:active,
-input[type="button"].pink:active {
-  background-color: #9b1da9;
-  border-color: #9b1da9;
+/* Space button's active */
+a.button.space:active,
+button.space:active,
+input[type="submit"].space:active,
+input[type="reset"].space:active,
+input[type="button"].space:active {
+  background-color: #455A64;
+  border-color: #455A64;
+}
+
+/* Rose button */
+a.button.rose,
+button.rose,
+input[type="submit"].rose,
+input[type="reset"].rose,
+input[type="button"].rose {
+  border: 2px #E91E63 solid;
+  color: #E91E63;
 }
+
+/* Rose button's hover */
+a.button.rose:hover,
+button.rose:hover,
+input[type="submit"].rose:hover,
+input[type="reset"].rose:hover,
+input[type="button"].rose:hover {
+  background-color: #E91E63;
+  border-color: #E91E63;
+  color: #fff;
+}
+
+/* Rose button's active */
+a.button.rose:active,
+button.rose:active,
+input[type="submit"].rose:active,
+input[type="reset"].rose:active,
+input[type="button"].rose:active {
+  background-color: #C2185B;
+  border-color: #C2185B;
+}