1 files changed, 25 insertions, 1 deletions
diff --git a/talermerchantdemos/static/blog.css b/talermerchantdemos/static/blog.css
index 9e0b910..e226ecd 100644
--- a/talermerchantdemos/static/blog.css
+++ b/talermerchantdemos/static/blog.css
@@ -22,6 +22,23 @@
   color: var(--link-colour, var(--default-link-colour, black));
 }
 
+/* Pay Icon */
+.payLink > .icon::before {
+  content: ''; /* Blank = CSS Won't render, which is why we put a Zero-Width-Space */
+  /* Size & Positioning */
+  display: inline-block;
+  width: 1.2em;
+  margin-right: 5px;
+  /* Set Icon */
+  background-image: url(/static/noun-shopping-cart-5195508.svg);
+  /* Ensure Icon is rendered correctly */
+  background-size: contain;
+  background-position: center center;
+  background-repeat: no-repeat;
+  /* Invert it by default unless otherwise specified */
+  filter: var(--paylink-icon-filter, invert());
+}
+/* Pay Button */
 .payLink {
   /* Variables */
   --link-colour: var(--button-confirm-foreground);
@@ -48,13 +65,20 @@
   /* Transformations */
   transform: none;
 }
+
+/* Hover */
 .payLink:hover {
   --background: var(--button-confirm-hovering-background);
   --link-colour: var(--button-confirm-hovering-foreground);
   --bottom-line: 0;
   transform: translateY(6px);
 }
-.payLink:active {
+
+/* Active */
+.payLink:active,
+.payLink:focus,
+.payLink:focus-within,
+.payLink:focus-visible {
   --background: var(--button-confirm-active-background);
   --link-colour: var(--button-confirm-active-foreground);
 }
 \ No newline at end of file