Separate `.button` class into `.button` and `.button-magenta`

Use `.button` only for base button traits.

3 files changed, 55 insertions, 52 deletions

diff --git a/assets/styles.css b/assets/styles.css
index 1fc5ee2..c3ba9c9 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -29,42 +29,42 @@ a:link { color: #b71863; }
 a:hover { color: #880442; }
 a.button {
 	padding: 13px 15px;
-	/* border: 1px solid #127354; */
-	/* border: 1px solid #18a578; */
-	border: 1px solid #790d52;
+	border: 1px solid;
 	border-radius: 10px;
-	box-shadow: 0 3px 13px -3px #2b041c;
-	background-color: #22e0a3;
-/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f11c9c+0,c91a7d+76 */
-background: #f11c9c; /* Old browsers */
-background: -moz-linear-gradient(top, #f11c9c 0%, #c91a7d 76%); /* FF3.6-15 */
-background: -webkit-linear-gradient(top, #f11c9c 0%,#c91a7d 76%); /* Chrome10-25,Safari5.1-6 */
-background: linear-gradient(to bottom, #f11c9c 0%,#c91a7d 76%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f11c9c', endColorstr='#c91a7d',GradientType=0 ); /* IE6-9 */
 	font-family: "Lucida Grande", "Lucida Sans Unicode", Geneva, sans-serif;
 	text-decoration: none;
+}
+a.button-magenta {
+	border-color: #790d52;
+	box-shadow: 0 3px 13px -3px #2b041c;
+	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f11c9c+0,c91a7d+76 */
+	background: #f11c9c; /* Old browsers */
+	background: -moz-linear-gradient(top, #f11c9c 0%, #c91a7d 76%); /* FF3.6-15 */
+	background: -webkit-linear-gradient(top, #f11c9c 0%,#c91a7d 76%); /* Chrome10-25,Safari5.1-6 */
+	background: linear-gradient(to bottom, #f11c9c 0%,#c91a7d 76%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f11c9c', endColorstr='#c91a7d',GradientType=0 ); /* IE6-9 */
 	color: #ffd7d7;
 	text-shadow: 0px -1px 2px #161c1f;
 }
-a.button:hover {
+a.button-magenta:hover {
 	border-color: #9e0e6a;
-/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff1ea5+0,dd1c83+100 */
-background: #ff1ea5; /* Old browsers */
-background: -moz-linear-gradient(top, #ff1ea5 0%, #dd1c83 100%); /* FF3.6-15 */
-background: -webkit-linear-gradient(top, #ff1ea5 0%,#dd1c83 100%); /* Chrome10-25,Safari5.1-6 */
-background: linear-gradient(to bottom, #ff1ea5 0%,#dd1c83 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff1ea5', endColorstr='#dd1c83',GradientType=0 ); /* IE6-9 */
+	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff1ea5+0,dd1c83+100 */
+	background: #ff1ea5; /* Old browsers */
+	background: -moz-linear-gradient(top, #ff1ea5 0%, #dd1c83 100%); /* FF3.6-15 */
+	background: -webkit-linear-gradient(top, #ff1ea5 0%,#dd1c83 100%); /* Chrome10-25,Safari5.1-6 */
+	background: linear-gradient(to bottom, #ff1ea5 0%,#dd1c83 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff1ea5', endColorstr='#dd1c83',GradientType=0 ); /* IE6-9 */
 	color: #ffe1e1;
 }
-a.button:active {
+a.button-magenta:active {
 	border-color: #4c0833;
 	box-shadow: 0 3px 13px -2px #2b041c;
-/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#dd1a89+0,bc186d+100 */
-background: #dd1a89; /* Old browsers */
-background: -moz-linear-gradient(top, #dd1a89 0%, #bc186d 100%); /* FF3.6-15 */
-background: -webkit-linear-gradient(top, #dd1a89 0%,#bc186d 100%); /* Chrome10-25,Safari5.1-6 */
-background: linear-gradient(to bottom, #dd1a89 0%,#bc186d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd1a89', endColorstr='#bc186d',GradientType=0 ); /* IE6-9 */
+	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#dd1a89+0,bc186d+100 */
+	background: #dd1a89; /* Old browsers */
+	background: -moz-linear-gradient(top, #dd1a89 0%, #bc186d 100%); /* FF3.6-15 */
+	background: -webkit-linear-gradient(top, #dd1a89 0%,#bc186d 100%); /* Chrome10-25,Safari5.1-6 */
+	background: linear-gradient(to bottom, #dd1a89 0%,#bc186d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd1a89', endColorstr='#bc186d',GradientType=0 ); /* IE6-9 */
 	color: #f1c2c2;
 }
 body {
diff --git a/assets/stylesheets/buttons.hcss b/assets/stylesheets/buttons.hcss
index 19a5423..189ba0d 100644
--- a/assets/stylesheets/buttons.hcss
+++ b/assets/stylesheets/buttons.hcss
@@ -1,49 +1,52 @@
 a.button {
 	padding: 13px 15px;
 
-	/* border: 1px solid #127354; */
-	/* border: 1px solid #18a578; */
-	border: 1px solid #790d52;
+	border: 1px solid;
 	border-radius: 10px;
-	box-shadow: 0 3px 13px -3px #2b041c;
-
-	background-color: #22e0a3;
-/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f11c9c+0,c91a7d+76 */
-background: #f11c9c; /* Old browsers */
-background: -moz-linear-gradient(top, #f11c9c 0%, #c91a7d 76%); /* FF3.6-15 */
-background: -webkit-linear-gradient(top, #f11c9c 0%,#c91a7d 76%); /* Chrome10-25,Safari5.1-6 */
-background: linear-gradient(to bottom, #f11c9c 0%,#c91a7d 76%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f11c9c', endColorstr='#c91a7d',GradientType=0 ); /* IE6-9 */
 
 	font-family: LUCIDA_GRANDE;
 	text-decoration: none;
+}
+
+a.button-magenta {
+	border-color: #790d52;
+
+	box-shadow: 0 3px 13px -3px #2b041c;
+
+	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f11c9c+0,c91a7d+76 */
+	background: #f11c9c; /* Old browsers */
+	background: -moz-linear-gradient(top, #f11c9c 0%, #c91a7d 76%); /* FF3.6-15 */
+	background: -webkit-linear-gradient(top, #f11c9c 0%,#c91a7d 76%); /* Chrome10-25,Safari5.1-6 */
+	background: linear-gradient(to bottom, #f11c9c 0%,#c91a7d 76%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f11c9c', endColorstr='#c91a7d',GradientType=0 ); /* IE6-9 */
+
 	color: #ffd7d7;
 	text-shadow: 0px -1px 2px #161c1f;
 }
 
-a.button:hover {
+a.button-magenta:hover {
 	border-color: #9e0e6a;
 
-/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff1ea5+0,dd1c83+100 */
-background: #ff1ea5; /* Old browsers */
-background: -moz-linear-gradient(top, #ff1ea5 0%, #dd1c83 100%); /* FF3.6-15 */
-background: -webkit-linear-gradient(top, #ff1ea5 0%,#dd1c83 100%); /* Chrome10-25,Safari5.1-6 */
-background: linear-gradient(to bottom, #ff1ea5 0%,#dd1c83 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff1ea5', endColorstr='#dd1c83',GradientType=0 ); /* IE6-9 */
+	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff1ea5+0,dd1c83+100 */
+	background: #ff1ea5; /* Old browsers */
+	background: -moz-linear-gradient(top, #ff1ea5 0%, #dd1c83 100%); /* FF3.6-15 */
+	background: -webkit-linear-gradient(top, #ff1ea5 0%,#dd1c83 100%); /* Chrome10-25,Safari5.1-6 */
+	background: linear-gradient(to bottom, #ff1ea5 0%,#dd1c83 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff1ea5', endColorstr='#dd1c83',GradientType=0 ); /* IE6-9 */
 
 	color: #ffe1e1;
 }
 
-a.button:active {
+a.button-magenta:active {
 	border-color: #4c0833;
 	box-shadow: 0 3px 13px -2px #2b041c;
 
-/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#dd1a89+0,bc186d+100 */
-background: #dd1a89; /* Old browsers */
-background: -moz-linear-gradient(top, #dd1a89 0%, #bc186d 100%); /* FF3.6-15 */
-background: -webkit-linear-gradient(top, #dd1a89 0%,#bc186d 100%); /* Chrome10-25,Safari5.1-6 */
-background: linear-gradient(to bottom, #dd1a89 0%,#bc186d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd1a89', endColorstr='#bc186d',GradientType=0 ); /* IE6-9 */
+	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#dd1a89+0,bc186d+100 */
+	background: #dd1a89; /* Old browsers */
+	background: -moz-linear-gradient(top, #dd1a89 0%, #bc186d 100%); /* FF3.6-15 */
+	background: -webkit-linear-gradient(top, #dd1a89 0%,#bc186d 100%); /* Chrome10-25,Safari5.1-6 */
+	background: linear-gradient(to bottom, #dd1a89 0%,#bc186d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd1a89', endColorstr='#bc186d',GradientType=0 ); /* IE6-9 */
 
 	color: #f1c2c2;
 }
diff --git a/index.html b/index.html
index 2b8c2f1..324a5d0 100644
--- a/index.html
+++ b/index.html
@@ -48,7 +48,7 @@
 		</div>
 
 		<p>
-			<a href="#" class="button">Buy ($15)</a>
+			<a href="#" class="button button-magenta">Buy ($15)</a>
 		</p>
 
 		<h2>Examples</h2>