<h1>This is a demo of the web share button</h1>

<p>
  Here is an image that you can <a class='web-share' href='https://placekitten.com/200/287'>share the URL</a>:
</p>
<p>
  <img src="http://placekitten.com/200/287" alt="Place holder image">
</p>


body {
  padding: 1em;
}
a.web-share {
  background: yellow;
  padding: .3em;  
}
a.web-share:hover {
  background: blue;
  color: yellow;
}
View Compiled 
let shareButtons = document.querySelectorAll("a.web-share");
for (button of shareButtons) {
  button.addEventListener('click', function(e){
    let href = this.getAttribute('href');
    let alt = this.getAttribute('alt');    
    if (navigator.share) {      
      navigator.share({
        title: alt,
        url: href
      });
      e.preventDefault();    
    }      
  });
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.