diff --git a/themes/chameleon/layout/_partial/post/title.ejs b/themes/chameleon/layout/_partial/post/title.ejs
index 7309396..13055ed 100644
--- a/themes/chameleon/layout/_partial/post/title.ejs
+++ b/themes/chameleon/layout/_partial/post/title.ejs
@@ -10,7 +10,7 @@
   <% } else { %>
     <h1 class="<%= class_name %>" itemprop="headline name"><%= post.title %>
       <%/* Share button */%>
-      <a class="share-button" id="share-click">
+      <a id="share-button">
         <svg viewBox="0 50 1635 1635">
           <title>Share post</title>
           <desc>Share icon</desc>
diff --git a/themes/chameleon/source/css/chameleon.css b/themes/chameleon/source/css/chameleon.css
index 76a1cb4..c7d18ef 100644
--- a/themes/chameleon/source/css/chameleon.css
+++ b/themes/chameleon/source/css/chameleon.css
@@ -721,21 +721,27 @@ svg#share:hover {
   fill: currentColor;
 }
 
+/* hide share button by default
+unhide (via JS) if Web Share API is supported */
+.article-title a#share-button {
+  display: none;
+}
+
 .article .article-entry a.headerlink svg,
-.article-title a.share-button svg {
+.article-title a#share-button svg {
   height: 0.75em;
 }
 
 /* don't underline permalink and share icons */
 .article .article-entry a.headerlink,
-.article-title a.share-button {
+.article-title a#share-button {
   border-bottom: none;
   margin-left: 0.5em;
 }
 
 /* underline permalink and share icons when hover */
 .article .article-entry a.headerlink:hover,
-.article-title a.share-button:hover {
+.article-title a#share-button:hover {
   border-bottom: 1px solid var(--link-underline);
 }
 
diff --git a/themes/chameleon/source/js/chameleon.js b/themes/chameleon/source/js/chameleon.js
index 95a4683..3ebf581 100644
--- a/themes/chameleon/source/js/chameleon.js
+++ b/themes/chameleon/source/js/chameleon.js
@@ -29,7 +29,12 @@ document.addEventListener('click', (evt) => {
 // https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share
 // Only available on supporting browsers and HTTPS
 if (navigator.share && document.location.protocol === 'https:') {
-  document.getElementById('share-click').addEventListener('click', async () => {
+  const shareBtn = document.getElementById('share-button')
+
+  // Unhide share-button if supported
+  shareBtn.style.display = 'initial'
+
+  shareBtn.addEventListener('click', async () => {
     const query = (selector) => {
       return document.querySelector(selector)
     }