<html>
  <body>
    <main>
      <section>
        <article>
          <div id="webShareIcons">
            <button id="webShare" onClick=share(); />
          </div>
          <div id="sharerUrlIcons">
              <button id="fb" onClick="window.open('https://www.facebook.com/sharer/sharer.php?u=https://jamesmiller.blog&quote=Check%20out%20James%20Miller%27s%20Creative%20Technology%20blog%20woohoo%20:D')" />
              <button id="twitter" onClick="window.open('https://twitter.com/intent/tweet?text=Check%20out%20James%20Miller%27s%20Creative%20Technology%20blog%20woohoo%20:D%20&url=https://jamesmiller.blog')" />
              <button id="whatsapp" onClick="window.open('https://wa.me/?text=https://jamesmiller.blog%20Check%20out%20James%20Miller%27s%20Creative%20Technology%20blog%20woohoo%20:D')" />
              <button id="pinterest" onClick="window.open('http://pinterest.com/pin/create/button/?url=https%3A%2F%2Fwww.jamesmiller.blog&description=James+Miller+Creative+Technology+Blog')" />
          </div>
        </article>
      </section>
    </main>
  </body>
</html>
html, body {
  padding: 0;
  margin: 0;
}

main {
  height: 100vh;
  position: relative;
  margin-left: auto;
  margin-right:auto;
  display:block;
/*   width: 20em; */
}
section {
  padding-top: 1em;
  padding-bottom: 1em;
  width: 100%;
  height: 5em;
  color: white;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

#webShare {
  height: 100%;
  width: 10em;
  margin-left:auto;
  margin-right: auto;
  cursor: pointer;
  display:block;
  background-image:url("https://static.thenounproject.com/png/3132-200.png");
  background-size:contain;
  background-repeat:no-repeat;
  background-size: 50%;
  background-position: 55% 45%;
  background-color: lightgrey;
  border-radius: 1.5em;
}

article {
  margin-left: auto;
  margin-right:auto;
  display:block;
  height: 100%;
  width: max-content;
}

#webShareIcons, #sharerUrlIcons {
  height: 100%;
}

#sharerUrlIcons button {
  cursor: pointer;
  height: 100%;
  width: 7em;
  display:inline-block;
  background-repeat:no-repeat;
  background-color: white;
  border-radius: 2em;
  margin-right: 1em;
  margin-left: 1em;
}

#fb {
  background-size: 180%;
  background-position: 50% 45%;
  background-image:url("https://f0.pngfuel.com/png/497/515/facebook-scalable-graphics-icon-facebook-logo-facebook-logo-png-clip-art-thumbnail.png");
   background-color: red;
}

#twitter {
  background-size: 100%;
  background-position: 50% 60%;
  background-image:url("https://cdn2.iconfinder.com/data/icons/minimalism/512/twitter.png");
   background-color: red;
}

#whatsapp {
  background-size: 400%;
  background-position: 50% 52%;
  background-image:url("https://media.idownloadblog.com/wp-content/uploads/2019/03/WhatsApp-white-logo-on-green-background.jpg");
   background-color: red;
}

#pinterest {
  background-size: 100%;
  background-position: 50% 50%;
  background-image:url("https://lh3.googleusercontent.com/dVsv8Hc4TOUeLFAahxR8KANg22W9dj2jBsTW1VHv3CV-5NCZjP9D9i2j5IpfVx2NTB8");
}
const sharerUrlIcons = document.querySelector('#sharerUrlIcons');
const webShareIcons = document.querySelector('#webShareIcons');

if (navigator.share) {
  sharerUrlIcons.style.display = "none";  
} else {
  webShareIcons.style.display = "none";    
}


function share() {
  if (navigator.share) {
    navigator.share({
      title: 'web.dev',
      text: "Check out James Miller's Creative Technology Blog :D",
      url: 'https://jamesmiller.blog',
    })
      .then(() =>   console.log('Successful share'))
      .catch((error) => console.log('Error sharing', error));
  } else {

  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.