diff --git a/core/src/components/card/card.scss b/core/src/components/card/card.scss
index 1533859cf3..f1ce991026 100755
--- a/core/src/components/card/card.scss
+++ b/core/src/components/card/card.scss
@@ -65,7 +65,7 @@
 
   outline: none;
 
-  background: var(--background);
+  background: inherit;
 }
 
 .card-native::-moz-focus-inner {
diff --git a/core/src/components/card/test/button/index.html b/core/src/components/card/test/button/index.html
index 69d68f0be9..e217674761 100644
--- a/core/src/components/card/test/button/index.html
+++ b/core/src/components/card/test/button/index.html
@@ -50,6 +50,33 @@
         </ion-card-content>
       </ion-card>
 
+      <ion-card button color="tertiary">
+        <ion-card-header>
+          <ion-card-subtitle>
+            Subtitle
+          </ion-card-subtitle>
+          <ion-card-title>
+            Button Card
+          </ion-card-title>
+        </ion-card-header>
+
+        <ion-card-content>
+          This is content, inside of a card with a button attribute.
+        </ion-card-content>
+      </ion-card>
+
+      <ion-card href="#" color="warning">
+        <ion-card-header>
+          <ion-card-title>
+            Anchor Card
+          </ion-card-title>
+        </ion-card-header>
+
+        <ion-card-content>
+          This is content, inside of a card with a href attribute.
+        </ion-card-content>
+      </ion-card>
+
       <ion-card button>
         <div style="position: absolute; top: 0; left:0; right:0; bottom:0;">
           <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHwAAAB8AQAAAACDZekTAAABMElEQVR4AWLABZjQBdjRBfgb0ATkD6AJ2D9AE6j/gCbw/weAyzk2IwAKwBgIixvNKPaA+P7yXplUZ1/7OO79DkYdjHrIqKeMeskoISXkWkLuBWSMkhGQMYCMAWQMISVkDCBjDCKjZAAZA8gYQMYAUkLGaBAZg8goGYPIGATGIDAGgTEIjEFgDCKjZAwiYxAYg8AYBMYgMAaBMYiMkjGIjEHGSMgYQErIGEDGAAKjZAwyhpAxgIwB5F9nvVsBCAUgDC3Zf2MGuCe1+r6QyBuMwSysg5WyF3bLeXBinCmnzr1wc9wtt08+SBAZI4XklCSTddpAX2gUnaOV9JZm033oAD8gDAyCUnAM0sFCaAlPIS5MhtpwHfLjBuyBXzAQjsJieE4T6kptqm81ss7W6ss/gwMyz60frEbR8QAAAABJRU5ErkJggg==">