.box
  button#shareBtn Нажмите чтобы использовать Web Share API
  p#share-links Ваш браузер не поддерживает Web Share API. Кнопка была скрыта, а Вы можете отобразить классические ссылки.
  a.copyright(href="https://webstacker.net/front-end/javascript/web-share-api-delimsya-kontentom-pravilno/", target="_blank") Статья на Webstacker.net
View Compiled 
body {
  display: flex;
  min-height: 100vh;
  font-size: 16px;
  text-align: center;
}

.box {
  margin: auto;
  width: 100%;
  max-width: 480px;
  padding: 15px;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
}

.copyright {
  margin-top: 30px;
}

#shareBtn {
  display: none;
  border: 1px solid #eee;
  padding: 15px;
  width: auto;
  max-width: 260px;
  background-color: transparent;
  transition: border-color .15s ease;
  cursor: pointer;
  
  &:hover {
    border-color: #212121;
    transition: border-color .15s ease;
  }
  
  &:active {
    color: inherit;
  }
}

#share-links {
  margin: 0;
}
View Compiled 
if (navigator.share) {
  var shareBtn = document.querySelector("#shareBtn"),
    shareLinks = document.querySelector("#share-links"),
    articleData = {
      url: "https://codepen.io/nickdeny/pen/rNaqWKd",
      title: "Webstacker – Web Share API",
      text:
        "Краткое описание контента. В некоторых приложениях также используется как Title."
    };

  shareBtn.style.display = "block";
  shareLinks.style.display = "none";

  shareBtn.addEventListener("click", () => {
    navigator
      .share(articleData)
      .then(() => console.log("Article shared!"))
      .catch(err => console.log(`${err}`));
  });
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.