diff --git a/aio/content/marketing/features.html b/aio/content/marketing/features.html
index 80c2bbb8d6..3ae730789d 100755
--- a/aio/content/marketing/features.html
+++ b/aio/content/marketing/features.html
@@ -105,9 +105,7 @@
   </div>
 
   <div class="cta-bar announcement-bar">
-    <button class="button">
-      <a href="guide/quickstart">Get Started</a>
-    </button>
+    <a class="button" href="guide/quickstart">Get Started</a>
   </div>
 
 </article>
diff --git a/aio/content/marketing/index.html b/aio/content/marketing/index.html
index f2f390925c..b485711f7a 100755
--- a/aio/content/marketing/index.html
+++ b/aio/content/marketing/index.html
@@ -17,9 +17,7 @@
       <!-- container content starts -->
 
       <div class="hero-headline no-toc">One framework.<br>Mobile &amp; desktop.</div>
-      <button class="button button-large button-plain hero-cta">
-        <a href="guide/quickstart">Get Started</a>
-      </button>
+      <a class="button hero-cta" href="guide/quickstart">Get Started</a>
   </div><!-- CONTAINER END -->
   </section>
 
@@ -34,10 +32,8 @@
       <div class="announcement-bar">
         <img src="generated/images/marketing/angular-mix.png" height="40" width="151">
         <p>Join us at our newest event, October 2017</p>
-        <button class="button">
-          <a href="https://angularmix.com/">Learn More</a>
-        </button>
-      </div>
+        <a class="button" href="https://angularmix.com/">Learn More</a>
+     </div>
     </div>
 
     <!-- Group 1-->
diff --git a/aio/src/styles/1-layouts/_marketing-layout.scss b/aio/src/styles/1-layouts/_marketing-layout.scss
index e9f108e1fc..ce8648c467 100644
--- a/aio/src/styles/1-layouts/_marketing-layout.scss
+++ b/aio/src/styles/1-layouts/_marketing-layout.scss
@@ -138,27 +138,22 @@ section#intro {
     padding: 32px 16px;
   }
 
-  button {
-    min-width: 160px;
+  .button {
+    align-items: center;
     background-color: $blue;
     border-radius: 48px;
     box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
+    box-sizing: border-box;
+    color: $white;
     cursor: pointer;
     display: flex;
-    align-items: center;
+    font-size: 16px;
     height: 40px;
     justify-content: center;
+    min-width: 160px;
 
     &:hover {
-      a {
-        color: $white;
-        opacity: 0.7;
-      }
-    }
-
-    a {
-      color: $white;
-      font-size: 16px;
+      color: rgba($white, 0.7);
     }
   }
 
@@ -239,22 +234,22 @@ section#intro {
   }
 }
 
-button.hero-cta {
+.button.hero-cta {
+  background-color: $white;
   border-radius: 48px;
-  display: flex;
-  height: 40px;
   box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
+  box-sizing: border-box;
   cursor: pointer;
+  font-size: 18px;
+  font-weight: 600;
+  height: 40px;
+  line-height: 40px;
+  padding: 0 24px;
+  text-align: center;
 
   &:hover {
     opacity: 0.9;
   }
-
-  a {
-    font-size: 18px;
-    font-weight: 600;
-    text-transform: uppercase;
-  }
 }
 
 aio-shell {