Improve and simplify style

src/page/image-button/image-button.html.ts

@@ -7,17 +7,13 @@ export const ImageButtonFactory =
     title: string,
     { shouldDownload = false }: { shouldDownload?: boolean } = {}
   ) =>
-  (href: url) =>
-    `
-  <a class="image-button" 
-    href="${href}"
-    rel="noopener"
-    target="_blank"
-    ${shouldDownload ? 'download' : ''}
-  >
-    <div class="svg-container">
-      ${svg}
-    </div>
-    <p>${title}</p>
-  </a>
-`;
+  (href?: url) =>
+    `<a ${href ? `href="${href}"` : ''}
+      class="image-button" tabindex="-1" rel="noopener" target="_blank" ${
+        shouldDownload ? 'download' : ''
+      }>
+      <button>
+        <div class="svg-container">${svg}</div>
+        <p>${title}</p>
+      </button>
+    </a>`;

src/page/image-button/image-button.scss

@@ -2,22 +2,26 @@
 
 .image-button {
   @include image-button(var(--icon-size));
+  padding: var(--small-margin) 8px;
+  text-align: center;
 
-  > .svg-container {
-    position: relative;
-    margin: auto;
-    @include square(var(--icon-size));
+  > button {
+    cursor: pointer;
 
-    > svg {
-      transition: stroke var(--transition-time), transform var(--transition-time);
+    > .svg-container {
+      position: relative;
+      margin: auto;
+      @include square(var(--icon-size));
+
+      > svg {
+        transition: stroke var(--transition-time), transform var(--transition-time);
+      }
+    }
+
+    > p {
+      font-size: 0.9rem;
+      font-style: italic;
+      text-align: center;
     }
   }
-
-  > p {
-    padding-bottom: var(--small-margin);
-    font-size: 0.9rem;
-    font-style: italic;
-    padding: 0 8px 8px 8px;
-    text-align: center;
-  }
 }