Example of share buttons on feature project

shares.html

<a class="share share--vkontakte" data-label="vkontakte" href="https://vk.com/share.php?url=https://knife.media/feature/mccombo/" data-title="title" target="_blank">
    <svg viewBox="0 0 27 16" xmlns="https://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M25.4046 1.82375C25.5903 1.24009 25.4046 0.810016 24.5686 0.810016H21.7923C21.0905 0.810016 20.7705 1.18889 20.5848 1.58824C20.5848 1.58824 19.1605 5.00831 17.1583 7.23034C16.5081 7.87544 16.2191 8.09048 15.8682 8.09048C15.6824 8.09048 15.4347 7.87544 15.4347 7.29178V1.79303C15.4347 1.09673 15.218 0.779297 14.6297 0.779297H10.264C9.83054 0.779297 9.5622 1.09673 9.5622 1.4244C9.5622 2.08998 10.5633 2.25382 10.6665 4.12769V8.19287C10.6665 9.07349 10.5014 9.23733 10.1505 9.23733C9.21129 9.23733 6.92009 5.78653 5.54743 1.85447C5.27909 1.07625 5.01075 0.789536 4.30893 0.789536H1.50169C0.69667 0.789536 0.5625 1.16841 0.5625 1.56776C0.5625 2.28454 1.50169 5.92989 4.95914 10.7323C7.25035 14.0193 10.5117 15.7805 13.4428 15.7805C15.218 15.7805 15.4347 15.3812 15.4347 14.7156V12.2273C15.4347 11.4286 15.5998 11.2955 16.1572 11.2955C16.5597 11.2955 17.2924 11.5106 18.9334 13.0875C20.8221 14.9613 21.1421 15.8112 22.1948 15.8112H24.9711C25.7761 15.8112 26.158 15.4119 25.9412 14.6337C25.7039 13.8555 24.7853 12.7393 23.5984 11.3979C22.9482 10.6504 21.9781 9.82099 21.6891 9.42164C21.2866 8.88918 21.3898 8.67414 21.6891 8.19287C21.6581 8.18263 25.0537 3.42115 25.4046 1.82375Z"></path>
    </svg>
</a>

<a class="share share--facebook" data-label="facebook" href="https://www.facebook.com/sharer/sharer.php?u=https://knife.media/feature/mccombo/" target="_blank">
    <svg viewBox="0 0 15 28" xmlns="https://www.w3.org/2000/svg">
        <path d="M12.4692 5.21765H14.5036V1.16043C14.5036 1.16043 12.657 0.841797 10.873 0.841797C7.15887 0.841797 4.73846 3.12531 4.73846 7.27812V10.9105H0.62793V15.6793H4.74889V27.2244C5.58352 27.3624 6.43901 27.4368 7.31536 27.4368L9.84011 27.2244V15.6793H13.6168L14.3262 10.9105H9.82967V7.80917C9.82967 6.50279 10.4556 5.21765 12.4692 5.21765Z"></path>
    </svg>
</a>

<a class="share share--telegram" data-label="telegram" href="https://tgram.link/share/url?url=https://knife.media/feature/mccombo/" data-title="text" target="_blank">
    <svg viewBox="0 0 26 22" xmlns="https://www.w3.org/2000/svg">
        <path d="M23.6289 0.448497L2.10545 8.93362C0.634554 9.54241 0.653173 10.3795 1.84478 10.741L7.37459 12.5103L20.1471 4.25348C20.7429 3.87298 21.3015 4.08226 20.8547 4.50081L10.5026 14.0513L19.5141 20.8432C20.5381 21.414 21.2829 21.1286 21.5436 19.873L25.1742 2.21782C25.5466 0.695821 24.597 -0.0081017 23.6289 0.448497Z"></path>
    </svg>
</a>

<a class="share share--twitter" data-label="twitter" href="https://twitter.com/intent/tweet?url=https://knife.media/feature/mccombo/" data-title="text" target="_blank">
    <svg version="1.1" viewBox="0 0 1024 1024">
        <path d="M1024 192c-34.133 17.067-76.8 25.6-119.467 34.133 42.667-25.6 76.8-68.267 93.867-110.933-42.667 25.6-85.333 42.667-136.533 51.2-34.133-42.667-93.867-68.267-153.6-68.267-119.467 0-213.333 93.867-213.333 204.8 0 17.067 0 34.133 8.533 42.667-170.667-8.533-332.8-93.867-435.2-213.333-17.067 34.133-25.6 68.267-25.6 110.933 0 68.267 34.133 136.533 93.867 170.667-34.133 0-68.267-8.533-93.867-25.6v0c0 102.4 68.267 179.2 170.667 204.8-17.067 8.533-34.133 8.533-51.2 8.533s-25.6 0-42.667 0c25.6 85.333 102.4 145.067 196.267 145.067-68.267 51.2-162.133 85.333-264.533 85.333-17.067 0-34.133 0-51.2 0 93.867 59.733 204.8 93.867 324.267 93.867 384 0 597.333-315.733 597.333-588.8 0-8.533 0-17.067 0-25.6 34.133-34.133 68.267-76.8 102.4-119.467v0z">
        </path>
    </svg>
</a>

shares.js

(function(){
    var links = document.querySelectorAll('.share');

    function openPopup(url, params) {
        var left = Math.round(screen.width / 2 - params.width / 2);
        var top = 0;

        if (screen.height > params.height) {
            top = Math.round(screen.height / 3 - params.height / 2);
        }

        return window.open(url, params.id, 'left=' + left + ',top=' + top + ',' +
        'width=' + params.width + ',height=' + params.height + ',personalbar=0,toolbar=0,scrollbars=1,resizable=1');
    }

    for (var i = 0; i < links.length; i++) {
        links[i].addEventListener('click', function (e) {
            e.preventDefault();

            var link = this.href;

            if ( this.dataset.title ) {
                link = link + '&' + this.dataset.title + '=' + encodeURIComponent(document.title);
            }

            return openPopup(link, {
                width: 600,
                height: 400,
                id: this.dataset.label
            })
        });
    }
})();

shares.scss

.share {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 4.375rem;
  height: 4.375rem;
  margin-right: 1.5rem;

  background-color: $color-second;
  border-radius: 50%;

  transition: background 0.25s;

  &:last-child {
    margin-right: 0;
  }

  svg {
    fill: $color-white;

    width: 2rem;
    height: 2rem;

    @media screen and (max-width: 400px) {
      width: 1.875rem;
      height: 1.875rem;
    }
  }

  &:hover {
    color: $color-white;
    background-color: $color-first;
  }

  @media screen and (max-width: 400px) {
    width: 4rem;
    height: 4rem;
    margin-right: 0.5rem;
  }
}