Style "Buy" button

* Move Lucida Grande font stack to a variable
* Add buttons styles for a magenta gradiented button

5 files changed, 97 insertions, 1 deletions

diff --git a/assets/styles.css b/assets/styles.css
index 60f4de8..1fc5ee2 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -27,6 +27,46 @@ h2 {
 }
 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-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;
+	color: #ffd7d7;
+	text-shadow: 0px -1px 2px #161c1f;
+}
+a.button: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 */
+	color: #ffe1e1;
+}
+a.button: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 */
+	color: #f1c2c2;
+}
 body {
 	background-color: #e3ce88;
 	color: #222;
diff --git a/assets/stylesheets/buttons.hcss b/assets/stylesheets/buttons.hcss
new file mode 100644
index 0000000..19a5423
--- /dev/null
+++ b/assets/stylesheets/buttons.hcss
@@ -0,0 +1,49 @@
+a.button {
+	padding: 13px 15px;
+
+	/* border: 1px solid #127354; */
+	/* border: 1px solid #18a578; */
+	border: 1px solid #790d52;
+	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;
+	color: #ffd7d7;
+	text-shadow: 0px -1px 2px #161c1f;
+}
+
+a.button: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 */
+
+	color: #ffe1e1;
+}
+
+a.button: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 */
+
+	color: #f1c2c2;
+}
diff --git a/assets/stylesheets/main.hcss b/assets/stylesheets/main.hcss
index 46ecf46..547e161 100644
--- a/assets/stylesheets/main.hcss
+++ b/assets/stylesheets/main.hcss
@@ -2,4 +2,5 @@ include(reset.css)
 include(color.hcss)
 include(typography.css)
 include(links.hcss)
+include(buttons.hcss)
 include(layout.hcss)
diff --git a/assets/stylesheets/typography.css b/assets/stylesheets/typography.css
index aca8884..7560fa8 100644
--- a/assets/stylesheets/typography.css
+++ b/assets/stylesheets/typography.css
@@ -1,5 +1,7 @@
+set(LUCIDA_GRANDE, `"Lucida Grande", "Lucida Sans Unicode", Geneva, sans-serif')
+
 h1, h2, h3, h4, h5, h6 {
-	font-family: "Lucida Grande", "Lucida Sans Unicode", Geneva, sans-serif;
+	font-family: LUCIDA_GRANDE;
 }
 
 h2 {
diff --git a/index.html b/index.html
index 4a8baaf..2b8c2f1 100644
--- a/index.html
+++ b/index.html
@@ -47,6 +47,10 @@
 			<span class="color-murky-pond">$</span> brew install teddywing/DomeKey/dome-key
 		</div>
 
+		<p>
+			<a href="#" class="button">Buy ($15)</a>
+		</p>
+
 		<h2>Examples</h2>
 
 		<p>Video controls:</p>