responsive-social-buttons
Version:
Responsive social buttons with webpack.Easily customize it by tweaking a few variables. SVGs allow for tiny file size and retina support.
432 lines (421 loc) • 96.3 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Social Share Buttons Example</title>
<meta name="description" content="Responsive Social Sharing Buttons: https://github.com/akulubala/responsive-social-buttons">
<meta name="twitter:image" content="https://github.com/akulubala/responsive-social-buttons/media/rrssb-preview.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="https://github.com/akulubala/responsive-social-buttons/media/favicon.png" />
<link rel="icon" type="image/png" href="https://github.com/akulubala/responsive-social-buttons/media/favicon.png" />
<link rel="stylesheet" href="/responsive-social-buttons/dist/social-buttons.css" />
<link rel="stylesheet" href="/responsive-social-buttons/css/gh-fork-ribbon.css" />
<style type="text/css">
body {
padding-bottom: 20px;
margin: 0px !important;
}
header {
display: flex;
display: -webkit-flex; /* Safari */
justify-content: center;
flex-direction: column;
align-items: center;
}
content {
padding-bottom: 20px;
}
content section {
flex: 1;
margin: 0 5%;
}
</style>
</head>
<body>
<header>
<h3>可响应式分享按钮案例（Examples of responsive social buttons）</h3>
<h4>所有button可直接复制一下标签`ul>li`使用（all buttons can used by copy `ul>li`）</h4>
<div>
</div>
</header>
<content>
<section>
<h4>图标按钮(icon buttons)</h4>
<h5>图标按钮 标签 `ul.rrssb-buttons` 上需要加类名 `tiny-format fixed-size` (icon buttons need add class `tiny-format fixed-size` to `ul.rrssb-buttons`)</h5>
<ul class="rrssb-buttons tiny-format fixed-size">
<li class="rrssb-email">
<a href="mailto:?Subject=Your%20Subject%20Here">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24"><path d="M21.386 2.614H2.614A2.345 2.345 0 0 0 .279 4.961l-.01 14.078a2.353 2.353 0 0 0 2.346 2.347h18.771a2.354 2.354 0 0 0 2.347-2.347V4.961a2.356 2.356 0 0 0-2.347-2.347zm0 4.694L12 13.174 2.614 7.308V4.961L12 10.827l9.386-5.866v2.347z"/></svg>
</span>
<span class="rrssb-text">email</span>
</a>
</li>
<li class="rrssb-wechat">
<a class="popup" data-url="https://github.com/akulubala/responsive-social-buttons" data-title="扫描二维码分享至微信" data-confirm-text="取消">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="36.969" height="29.031" viewBox="0 0 36.969 29.031"><defs><style>.cls-1{fill:#000;fill-rule:evenodd}</style></defs><path d="M32.399 25.866l.985 3.152-3.591-1.894c-1.31.316-2.625.631-3.928.631-6.229 0-11.134-4.099-11.134-9.146 0-5.041 4.905-9.15 11.134-9.15 5.882 0 11.119 4.109 11.119 9.15 0 2.842-1.958 5.359-4.585 7.257zM22.256 14.509c-.652 0-1.309.633-1.309 1.26 0 .638.657 1.262 1.309 1.262.99 0 1.637-.624 1.637-1.262 0-.627-.647-1.26-1.637-1.26zm7.2 0c-.647 0-1.301.633-1.301 1.26 0 .638.654 1.262 1.301 1.262.981 0 1.638-.624 1.638-1.262 0-.627-.657-1.26-1.638-1.26zM13.908 18.76c0 .915.148 1.798.404 2.641-.404.031-.811.05-1.222.05-1.634 0-2.948-.321-4.586-.632l-4.575 2.209 1.309-3.791C1.96 17.031.001 14.187.001 10.726.001 4.728 5.894.004 13.09.004c6.437 0 12.075 3.774 13.208 8.852a12.005 12.005 0 0 0-1.261-.073c-6.219 0-11.129 4.469-11.129 9.977zM8.837 5.365c-.981 0-1.971.624-1.971 1.573 0 .945.99 1.578 1.971 1.578.982 0 1.634-.633 1.634-1.578 0-.949-.652-1.573-1.634-1.573zm9.161 0c-.981 0-1.964.624-1.964 1.573 0 .945.983 1.578 1.964 1.578.986 0 1.638-.633 1.638-1.578 0-.949-.652-1.573-1.638-1.573z" class="cls-1"/></svg>
</span>
<span class="rrssb-text">Wechat</span>
</a>
</li>
<li class="rrssb-weibo">
<a class="popup" href="http://service.weibo.com/share/share.php?text=响应式分享按钮&title=响应式分享按钮&url=https://github.com/akulubala/responsive-social-buttons">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="37" height="30" viewBox="0 0 37 30"><defs><style>.cls-1{fill:#000;fill-rule:evenodd}</style></defs><path d="M36.539 12.806v.006a1.418 1.418 0 0 1-2.698-.875h-.001a6.974 6.974 0 0 0-1.456-6.82 6.965 6.965 0 0 0-6.631-2.147 1.418 1.418 0 0 1-.592-2.775h.001a9.791 9.791 0 0 1 9.327 3.022 9.803 9.803 0 0 1 2.05 9.589zm-9.818-5.3v-.001a1.22 1.22 0 1 1-.509-2.386 4.772 4.772 0 0 1 5.54 6.141 1.222 1.222 0 0 1-1.536.787 1.222 1.222 0 0 1-.785-1.538h-.002a2.332 2.332 0 0 0-2.708-3.003zm.489 2.284c.641.916.579 2.2-.012 3.688-.273.685.085.791.606.948 2.123.658 4.487 2.252 4.487 5.059 0 4.647-6.697 10.5-16.765 10.5-7.679 0-15.529-3.724-15.529-9.85 0-3.202 2.028-6.905 5.519-10.399 4.663-4.664 10.1-6.789 12.145-4.742.902.902.989 2.464.409 4.329-.302.939.881.419.881.421 3.769-1.579 7.057-1.672 8.259.046zm-1.287 9.611c-.397-4.024-5.687-6.796-11.816-6.19-6.127.607-10.774 4.361-10.376 8.386.398 4.026 5.688 6.797 11.816 6.192 6.129-.606 10.773-4.361 10.376-8.388zM11.584 26.06c-2.946-.952-4.193-3.862-2.903-6.484 1.267-2.571 4.562-4.025 7.478-3.266 3.018.78 4.558 3.629 3.325 6.395-1.251 2.831-4.848 4.34-7.9 3.355zm1.664-5.511c-.949-.398-2.175.011-2.761.93-.593.923-.314 2.022.628 2.451.956.437 2.225.022 2.818-.924.582-.956.275-2.048-.685-2.457zm2.339-.97c-.364-.145-.819.03-1.033.389-.207.36-.093.77.272.92.371.153.845-.023 1.059-.39.205-.369.072-.784-.298-.919z" class="cls-1"/></svg>
</span>
<span class="rrssb-text">Weibo</span>
</a>
</li>
<li class="rrssb-douban">
<a class="popup" href="http://shuo.douban.com/!service/share?href=https://github.com/akulubala/responsive-social-buttons&name=响应式分享按钮bb&text=响应式分享按钮&starid=0&aid=0&style=11">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="32" height="28" viewBox="0 0 32 28"><defs><style>.cls-1{fill:#000;fill-rule:evenodd}</style></defs><path d="M9.731 18.328c1.303 1.777 2.478 4.013 3.507 6.521h6.323c1.23-1.935 2.18-4.173 3.108-6.521l3.568 1.199c-.933 1.98-2.068 3.817-3.135 5.322h8.853L32 28H0v-3l9.697-.151a41.574 41.574 0 0 0-3.248-5.322l3.282-1.199zM1 0h30v3H1V0zm3.132 5.882L28 6v12H4l.132-12.118zM25 15l.126-6.162L7 9v6h18z" class="cls-1"/></svg>
</span>
<span class="rrssb-text">Douban</span>
</a>
</li>
<li class="rrssb-facebook">
<!-- Replace with your URL. For best results, make sure you page has the proper FB Open Graph tags in header:
https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/ -->
<a href="https://www.facebook.com/sharer/sharer.php?u=https://github.com/akulubala/responsive-social-buttons" class="popup">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width='24' height='24' viewBox="0 0 29 29"><path d="M26.4 0H2.6C1.714 0 0 1.715 0 2.6v23.8c0 .884 1.715 2.6 2.6 2.6h12.393V17.988h-3.996v-3.98h3.997v-3.062c0-3.746 2.835-5.97 6.177-5.97 1.6 0 2.444.173 2.845.226v3.792H21.18c-1.817 0-2.156.9-2.156 2.168v2.847h5.045l-.66 3.978h-4.386V29H26.4c.884 0 2.6-1.716 2.6-2.6V2.6c0-.885-1.716-2.6-2.6-2.6z"/></svg>
</span>
<span class="rrssb-text">facebook</span>
</a>
</li>
<li class="rrssb-instagram">
<!-- Replace href with your URL -->
<a href="http://instagram.com/dbox">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="864" height="864" viewBox="0 0 864 864"><path d="M860.079 254.436c-2.091-45.841-9.371-77.147-20.019-104.542-11.007-28.32-25.731-52.338-49.673-76.28-23.943-23.943-47.962-38.669-76.282-49.675C686.711 13.292 655.404 6.013 609.564 3.92 563.628 1.824 548.964 1.329 432 1.329s-131.63.495-177.564 2.591c-45.841 2.093-77.147 9.372-104.542 20.019-28.319 11.006-52.338 25.731-76.28 49.675-23.943 23.942-38.669 47.96-49.675 76.28C13.292 177.288 6.013 208.595 3.92 254.436 1.824 300.37 1.329 315.036 1.329 432s.495 131.628 2.591 177.564c2.093 45.84 9.372 77.146 20.019 104.541 11.006 28.319 25.731 52.339 49.675 76.282 23.942 23.941 47.961 38.666 76.28 49.673 27.395 10.647 58.701 17.927 104.542 20.019 45.935 2.096 60.601 2.592 177.564 2.592s131.628-.496 177.564-2.592c45.84-2.092 77.146-9.371 104.541-20.019 28.32-11.007 52.339-25.731 76.282-49.673 23.941-23.943 38.666-47.962 49.673-76.282 10.647-27.395 17.928-58.701 20.019-104.541 2.096-45.937 2.592-60.601 2.592-177.564s-.496-131.63-2.592-177.564zm-77.518 351.591c-1.915 41.99-8.932 64.793-14.828 79.969-7.812 20.102-17.146 34.449-32.216 49.521-15.071 15.07-29.419 24.403-49.521 32.216-15.176 5.896-37.979 12.913-79.969 14.828-45.406 2.072-59.024 2.511-174.027 2.511s-128.622-.438-174.028-2.511c-41.988-1.915-64.794-8.932-79.97-14.828-20.102-7.812-34.448-17.146-49.518-32.216-15.071-15.071-24.405-29.419-32.218-49.521-5.897-15.176-12.912-37.979-14.829-79.968-2.071-45.413-2.51-59.034-2.51-174.028s.438-128.615 2.51-174.028c1.917-41.988 8.932-64.794 14.829-79.97 7.812-20.102 17.146-34.448 32.216-49.518 15.071-15.071 29.418-24.405 49.52-32.218 15.176-5.897 37.981-12.912 79.97-14.829 45.413-2.071 59.034-2.51 174.028-2.51s128.615.438 174.027 2.51c41.99 1.917 64.793 8.932 79.969 14.829 20.102 7.812 34.449 17.146 49.521 32.216 15.07 15.071 24.403 29.418 32.216 49.52 5.896 15.176 12.913 37.981 14.828 79.97 2.071 45.413 2.511 59.034 2.511 174.028s-.44 128.615-2.511 174.027z"/><path d="M432 210.844c-122.142 0-221.156 99.015-221.156 221.156S309.859 653.153 432 653.153 653.153 554.14 653.153 432c0-122.142-99.012-221.156-221.153-221.156zm0 364.713c-79.285 0-143.558-64.273-143.558-143.557 0-79.285 64.272-143.558 143.558-143.558 79.283 0 143.557 64.272 143.557 143.558 0 79.283-64.274 143.557-143.557 143.557z"/><circle cx="661.893" cy="202.107" r="51.68"/></svg>
</span>
<span class="rrssb-text">instagram</span>
</a>
</li>
<li class="rrssb-tumblr">
<a href="http://tumblr.com/share/link?url=https://github.com/akulubala/responsive-social-buttons">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M18.02 21.842c-2.03.052-2.422-1.396-2.44-2.446v-7.294h4.73V7.874H15.6V1.592h-3.714s-.167.053-.182.186c-.218 1.935-1.144 5.33-4.988 6.688v3.637h2.927v7.677c0 2.8 1.7 6.7 7.3 6.6 1.863-.03 3.934-.795 4.392-1.453l-1.22-3.54c-.52.213-1.415.413-2.115.455z"/></svg>
</span>
<span class="rrssb-text">tumblr</span>
</a>
</li>
<li class="rrssb-stackoverflow">
<a href="http://www.stackoverflow.com">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="24" height="30" viewBox="0 0 24 30"><defs><style>.cls-1{fill:#000;fill-rule:evenodd}</style></defs><path d="M21.459 12.096L19.395.438l2.539-.432 2.064 11.658-2.539.432zm-2.59 1.577l-6.798-9.776L14.2 2.473l6.797 9.777-2.128 1.423zm-1.729 2.523L6.748 10.185l1.31-2.177 10.391 6.012-1.309 2.176zm-.88 3.155L4.609 16.279l.669-2.44 11.651 3.072-.669 2.44zm-.36 3.373L3.887 21.64l.236-2.517 12.013 1.085-.236 2.516zm.018 3.331H3.797v-2.703h12.121v2.703zm2.02-8.355h2.02l-.003 11.687s0 .59-.02.59v.01H.632s-.602 0-.602-.01H.01V17.7h2.02v10.321h15.908V17.7z" class="cls-1"/></svg>
</span>
<span class="rrssb-text">tumblr</span>
</a>
</li>
<li class="rrssb-linkedin">
<!-- Replace href with your meta and URL information -->
<a href="http://www.linkedin.com/shareArticle?mini=true&url=https://github.com/akulubala/responsive-social-buttons&title=20Responsive%20Social%20Sharing%20Buttons&summary=Responsive%20social%20icons%20by%20KNI%20Labs" class="popup">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M25.424 15.887v8.447h-4.896v-7.882c0-1.98-.71-3.33-2.48-3.33-1.354 0-2.158.91-2.514 1.802-.13.315-.162.753-.162 1.194v8.216h-4.9s.067-13.35 0-14.73h4.9v2.087c-.01.017-.023.033-.033.05h.032v-.05c.65-1.002 1.812-2.435 4.414-2.435 3.222 0 5.638 2.106 5.638 6.632zM5.348 2.5c-1.676 0-2.772 1.093-2.772 2.54 0 1.42 1.066 2.538 2.717 2.546h.032c1.71 0 2.77-1.132 2.77-2.546C8.056 3.593 7.02 2.5 5.344 2.5h.005zm-2.48 21.834h4.896V9.604H2.867v14.73z"/></svg>
</span>
<span class="rrssb-text">linkedin</span>
</a>
</li>
<li class="rrssb-xing">
<!-- Replace href with your meta and URL information -->
<a href="https://www.xing.com/spi/shares/new?url=https://github.com/akulubala/responsive-social-buttons" class="popup">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M18.89,30.708L12.023,18.67L22.681,0h7.173L19.197,18.669l6.867,12.038L18.89,30.708L18.89,30.708z M7.617,21.422l5.328-8.771L8.949,5.612H2.186l3.995,7.039l-5.327,8.771H7.617z"/></svg>
</span>
<span class="rrssb-text">xing</span>
</a>
</li>
<li class="rrssb-twitter">
<!-- Replace href with your Meta and URL information -->
<a href="https://twitter.com/intent/tweet?text=https://github.com/akulubala/responsive-social-buttons"
class="popup">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M24.253 8.756C24.69 17.08 18.297 24.182 9.97 24.62a15.093 15.093 0 0 1-8.86-2.32c2.702.18 5.375-.648 7.507-2.32a5.417 5.417 0 0 1-4.49-3.64c.802.13 1.62.077 2.4-.154a5.416 5.416 0 0 1-4.412-5.11 5.43 5.43 0 0 0 2.168.387A5.416 5.416 0 0 1 2.89 4.498a15.09 15.09 0 0 0 10.913 5.573 5.185 5.185 0 0 1 3.434-6.48 5.18 5.18 0 0 1 5.546 1.682 9.076 9.076 0 0 0 3.33-1.317 5.038 5.038 0 0 1-2.4 2.942 9.068 9.068 0 0 0 3.02-.85 5.05 5.05 0 0 1-2.48 2.71z"/></svg>
</span>
<span class="rrssb-text">twitter</span>
</a>
</li>
<li class="rrssb-reddit">
<a class="popup" href="http://www.reddit.com/submit?url=https://github.com/akulubala/responsive-social-buttons&title=RRSSB&text=Check%20out%20how%2020responsive%20these%20social%20buttons%20are">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M11.794 15.316c0-1.03-.835-1.895-1.866-1.895-1.03 0-1.893.866-1.893 1.896s.863 1.9 1.9 1.9c1.023-.016 1.865-.916 1.865-1.9zM18.1 13.422c-1.03 0-1.895.864-1.895 1.895 0 1 .9 1.9 1.9 1.865 1.03 0 1.87-.836 1.87-1.865-.006-1.017-.875-1.917-1.875-1.895zM17.527 19.79c-.678.68-1.826 1.007-3.514 1.007h-.03c-1.686 0-2.834-.328-3.51-1.005a.677.677 0 0 0-.958 0c-.264.265-.264.7 0 1 .943.9 2.4 1.4 4.5 1.402.005 0 0 0 0 0 .005 0 0 0 0 0 2.066 0 3.527-.46 4.47-1.402a.678.678 0 0 0 .002-.958c-.267-.334-.688-.334-.988-.043z"/><path d="M27.707 13.267a3.24 3.24 0 0 0-3.236-3.237c-.792 0-1.517.287-2.08.76-2.04-1.294-4.647-2.068-7.44-2.218l1.484-4.69 4.062.955c.07 1.4 1.3 2.6 2.7 2.555a2.696 2.696 0 0 0 2.695-2.695C25.88 3.2 24.7 2 23.2 2c-1.06 0-1.98.616-2.42 1.508l-4.633-1.09a.683.683 0 0 0-.803.454l-1.793 5.7C10.55 8.6 7.7 9.4 5.6 10.75c-.594-.45-1.3-.75-2.1-.72-1.785 0-3.237 1.45-3.237 3.2 0 1.1.6 2.1 1.4 2.69-.04.27-.06.55-.06.83 0 2.3 1.3 4.4 3.7 5.9 2.298 1.5 5.3 2.3 8.6 2.325 3.227 0 6.27-.825 8.57-2.325 2.387-1.56 3.7-3.66 3.7-5.917 0-.26-.016-.514-.05-.768.965-.465 1.577-1.565 1.577-2.698zm-4.52-9.912c.74 0 1.3.6 1.3 1.3a1.34 1.34 0 0 1-2.683 0c.04-.655.596-1.255 1.396-1.3zM1.646 13.3c0-1.038.845-1.882 1.883-1.882.31 0 .6.1.9.21-1.05.867-1.813 1.86-2.26 2.9-.338-.328-.57-.728-.57-1.26zm20.126 8.27c-2.082 1.357-4.863 2.105-7.83 2.105-2.968 0-5.748-.748-7.83-2.105-1.99-1.3-3.087-3-3.087-4.782 0-1.784 1.097-3.484 3.088-4.784 2.08-1.358 4.86-2.106 7.828-2.106 2.967 0 5.7.7 7.8 2.106 1.99 1.3 3.1 3 3.1 4.784C24.86 18.6 23.8 20.3 21.8 21.57zm4.014-6.97c-.432-1.084-1.19-2.095-2.244-2.977.273-.156.59-.245.928-.245 1.036 0 1.9.8 1.9 1.9a2.073 2.073 0 0 1-.57 1.327z"/></svg>
</span>
<span class="rrssb-text">reddit</span>
</a>
</li>
<li class="rrssb-vk">
<a href="http://vk.com/share.php?url=https://github.com/akulubala/responsive-social-buttons" class="popup">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="70 70 378.7 378.7"><path d="M254.998 363.106h21.217s6.408-.706 9.684-4.23c3.01-3.24 2.914-9.32 2.914-9.32s-.415-28.47 12.796-32.663c13.03-4.133 29.755 27.515 47.482 39.685 13.407 9.206 23.594 7.19 23.594 7.19l47.407-.662s24.797-1.53 13.038-21.027c-.96-1.594-6.85-14.424-35.247-40.784-29.728-27.59-25.743-23.126 10.063-70.85 21.807-29.063 30.523-46.806 27.8-54.405-2.596-7.24-18.636-5.326-18.636-5.326l-53.375.33s-3.96-.54-6.892 1.216c-2.87 1.716-4.71 5.726-4.71 5.726s-8.452 22.49-19.714 41.618c-23.77 40.357-33.274 42.494-37.16 39.984-9.037-5.842-6.78-23.462-6.78-35.983 0-39.112 5.934-55.42-11.55-59.64-5.802-1.4-10.076-2.327-24.915-2.48-19.046-.192-35.162.06-44.29 4.53-6.072 2.975-10.757 9.6-7.902 9.98 3.528.47 11.516 2.158 15.75 7.92 5.472 7.444 5.28 24.154 5.28 24.154s3.145 46.04-7.34 51.758c-7.193 3.922-17.063-4.085-38.253-40.7-10.855-18.755-19.054-39.49-19.054-39.49s-1.578-3.873-4.398-5.947c-3.42-2.51-8.2-3.307-8.2-3.307l-50.722.33s-7.612.213-10.41 3.525c-2.488 2.947-.198 9.036-.198 9.036s39.707 92.902 84.672 139.72c41.234 42.93 88.048 40.112 88.048 40.112"/></svg>
</span>
<span class="rrssb-text">vk.com</span>
</a>
</li>
<li class="rrssb-hackernews">
<a href="https://news.ycombinator.com/submitlink?u=http://www.rrssb.ml/&t=Check%20out%20how%2020responsive%20these%20social%20buttons%20are&text=Check%20out%20how%2020responsive%20these%20social%20buttons%20are">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M14 13.626l-4.508-9.19H6.588l6.165 12.208v6.92h2.51v-6.92l6.15-12.21H18.69z"/></svg>
</span>
<span class="rrssb-text">hackernews</span>
</a>
</li>
<li class="rrssb-googleplus">
<!-- Replace href with your meta and URL information. -->
<a href="https://plus.google.com/share?url=https://github.com/akulubala/responsive-social-buttons" class="popup">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21 8.29h-1.95v2.6h-2.6v1.82h2.6v2.6H21v-2.6h2.6v-1.885H21V8.29zM7.614 10.306v2.925h3.9c-.26 1.69-1.755 2.925-3.9 2.925-2.34 0-4.29-2.016-4.29-4.354s1.885-4.353 4.29-4.353c1.104 0 2.014.326 2.794 1.105l2.08-2.08c-1.3-1.17-2.924-1.883-4.874-1.883C3.65 4.586.4 7.835.4 11.8s3.25 7.212 7.214 7.212c4.224 0 6.953-2.988 6.953-7.082 0-.52-.065-1.104-.13-1.624H7.614z"/></svg> </span>
<span class="rrssb-text">google+</span>
</a>
</li>
<li class="rrssb-pocket">
<a href="https://getpocket.com/save?url=https://github.com/akulubala/responsive-social-buttons">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M28.782.002c2.03.002 3.193 1.12 3.182 3.106-.022 3.57.17 7.16-.158 10.7-1.09 11.773-14.588 18.092-24.6 11.573C2.72 22.458.197 18.313.057 12.937c-.09-3.36-.05-6.72-.026-10.08C.04 1.113 1.212.016 3.02.008 7.347-.006 11.678.004 16.006.002c4.258 0 8.518-.004 12.776 0zM8.65 7.856c-1.262.135-1.99.57-2.357 1.476-.392.965-.115 1.81.606 2.496a746.818 746.818 0 0 0 7.398 6.966c1.086 1.003 2.237.99 3.314-.013a700.448 700.448 0 0 0 7.17-6.747c1.203-1.148 1.32-2.468.365-3.426-1.01-1.014-2.302-.933-3.558.245-1.596 1.497-3.222 2.965-4.75 4.526-.706.715-1.12.627-1.783-.034a123.71 123.71 0 0 0-4.93-4.644c-.47-.42-1.123-.647-1.478-.844z"/></svg>
</span>
<span class="rrssb-text">pocket</span>
</a>
</li>
<li class="rrssb-youtube">
<a href="#">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M27.688 8.512a4.086 4.086 0 0 0-4.106-4.093H4.39A4.084 4.084 0 0 0 .312 8.51v10.976A4.08 4.08 0 0 0 4.39 23.58h19.19a4.09 4.09 0 0 0 4.107-4.092V8.512zm-16.425 10.12V8.322l7.817 5.154-7.817 5.156z"/></svg>
</span>
<span class="rrssb-text">youtube</span>
</a>
</li>
<li class="rrssb-pinterest">
<!-- Replace href with your meta and URL information. -->
<a href="http://pinterest.com/pin/create/button/?url=https://github.com/akulubala/responsive-social-buttons&media=https://github.com/akulubala/responsive-social-buttons/media/facebook-share.jpg&description=20responsive%20social%20sharing%20buttons%20by%20KNI%20Labs.">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M14.02 1.57c-7.06 0-12.784 5.723-12.784 12.785S6.96 27.14 14.02 27.14c7.062 0 12.786-5.725 12.786-12.785 0-7.06-5.724-12.785-12.785-12.785zm1.24 17.085c-1.16-.09-1.648-.666-2.558-1.22-.5 2.627-1.113 5.146-2.925 6.46-.56-3.972.822-6.952 1.462-10.117-1.094-1.84.13-5.545 2.437-4.632 2.837 1.123-2.458 6.842 1.1 7.557 3.71.744 5.226-6.44 2.924-8.775-3.324-3.374-9.677-.077-8.896 4.754.19 1.178 1.408 1.538.49 3.168-2.13-.472-2.764-2.15-2.683-4.388.132-3.662 3.292-6.227 6.46-6.582 4.008-.448 7.772 1.474 8.29 5.24.58 4.254-1.815 8.864-6.1 8.532v.003z"/></svg>
</span>
<span class="rrssb-text">pinterest</span>
</a>
</li>
<li class="rrssb-github">
<a href="https://github.com/akulubala">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M13.97 1.57c-7.03 0-12.733 5.703-12.733 12.74 0 5.622 3.636 10.393 8.717 12.084.637.13.87-.277.87-.615 0-.302-.013-1.103-.02-2.165-3.54.77-4.29-1.707-4.29-1.707-.578-1.473-1.413-1.863-1.413-1.863-1.154-.79.09-.775.09-.775 1.276.104 1.96 1.316 1.96 1.312 1.135 1.936 2.99 1.393 3.712 1.06.116-.823.445-1.384.81-1.704-2.83-.32-5.802-1.414-5.802-6.293 0-1.39.496-2.527 1.312-3.418-.132-.322-.57-1.617.123-3.37 0 0 1.07-.343 3.508 1.305A12.22 12.22 0 0 1 14 7.732c1.082 0 2.167.156 3.198.44 2.43-1.65 3.498-1.307 3.498-1.307.695 1.754.258 3.043.13 3.37a4.968 4.968 0 0 1 1.314 3.43c0 4.893-2.978 5.97-5.814 6.286.458.388.876 1.16.876 2.358 0 1.703-.016 3.076-.016 3.482 0 .334.232.748.877.61 5.056-1.687 8.7-6.456 8.7-12.08-.055-7.058-5.75-12.757-12.792-12.75z"/></svg>
</span>
<span class="rrssb-text">github</span>
</a>
</li>
<li class="rrssb-print">
<a href="javascript:window.print()">
<span class="rrssb-icon">
<svg viewbox="0 0 24 24"><path fill="#000000" d="M18,3H6V7H18M19,12A1,1 0 0,1 18,11A1,1 0 0,1 19,10A1,1 0 0,1 20,11A1,1 0 0,1 19,12M16,19H8V14H16M19,8H5A3,3 0 0,0 2,11V17H6V21H18V17H22V11A3,3 0 0,0 19,8Z"></path></svg>
</span>
<span class="rrssb-text">print</span>
</a>
</li>
<li class="rrssb-whatsapp">
<a href="whatsapp://send?text=20Responsive%20Social%20Sharing%20Buttons%3A%20http%3A%2F%2Frrssb.ml%20%7C%20http%3A%2F%2Frrssb.ml%2Frrssb-preview.png" data-action="share/whatsapp/share">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90"><path d="M90 43.841c0 24.213-19.779 43.841-44.182 43.841a44.256 44.256 0 0 1-21.357-5.455L0 90l7.975-23.522a43.38 43.38 0 0 1-6.34-22.637C1.635 19.628 21.416 0 45.818 0 70.223 0 90 19.628 90 43.841zM45.818 6.982c-20.484 0-37.146 16.535-37.146 36.859 0 8.065 2.629 15.534 7.076 21.61L11.107 79.14l14.275-4.537A37.122 37.122 0 0 0 45.819 80.7c20.481 0 37.146-16.533 37.146-36.857S66.301 6.982 45.818 6.982zm22.311 46.956c-.273-.447-.994-.717-2.076-1.254-1.084-.537-6.41-3.138-7.4-3.495-.993-.358-1.717-.538-2.438.537-.721 1.076-2.797 3.495-3.43 4.212-.632.719-1.263.809-2.347.271-1.082-.537-4.571-1.673-8.708-5.333-3.219-2.848-5.393-6.364-6.025-7.441-.631-1.075-.066-1.656.475-2.191.488-.482 1.084-1.255 1.625-1.882.543-.628.723-1.075 1.082-1.793.363-.717.182-1.344-.09-1.883-.27-.537-2.438-5.825-3.34-7.977-.902-2.15-1.803-1.792-2.436-1.792-.631 0-1.354-.09-2.076-.09s-1.896.269-2.889 1.344c-.992 1.076-3.789 3.676-3.789 8.963 0 5.288 3.879 10.397 4.422 11.113.541.716 7.49 11.92 18.5 16.223C58.2 65.771 58.2 64.336 60.186 64.156c1.984-.179 6.406-2.599 7.312-5.107.9-2.512.9-4.663.631-5.111z"/></svg>
</span>
<span class="rrssb-text">Whatsapp</span>
</a>
</li>
</ul>
</section>
<section>
<h4>小方形按钮(Small square buttons)</h4>
<h5>小方形按钮 标签 `ul.rrssb-buttons` 上需要加类名 `small-format fixed-size` (small square buttons need add class `small-format fixed-size` to `ul.rrssb-buttons`)</h5>
<ul class="rrssb-buttons small-format fixed-size">
<li class="rrssb-email">
<a href="mailto:?Subject=Your%20Subject%20Here">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24"><path d="M21.386 2.614H2.614A2.345 2.345 0 0 0 .279 4.961l-.01 14.078a2.353 2.353 0 0 0 2.346 2.347h18.771a2.354 2.354 0 0 0 2.347-2.347V4.961a2.356 2.356 0 0 0-2.347-2.347zm0 4.694L12 13.174 2.614 7.308V4.961L12 10.827l9.386-5.866v2.347z"/></svg>
</span>
<span class="rrssb-text">email</span>
</a>
</li>
<li class="rrssb-wechat">
<a class="popup" data-url="https://github.com/akulubala/responsive-social-buttons" data-title="扫描二维码分享至微信" data-confirm-text="取消">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="36.969" height="29.031" viewBox="0 0 36.969 29.031"><defs><style>.cls-1{fill:#000;fill-rule:evenodd}</style></defs><path d="M32.399 25.866l.985 3.152-3.591-1.894c-1.31.316-2.625.631-3.928.631-6.229 0-11.134-4.099-11.134-9.146 0-5.041 4.905-9.15 11.134-9.15 5.882 0 11.119 4.109 11.119 9.15 0 2.842-1.958 5.359-4.585 7.257zM22.256 14.509c-.652 0-1.309.633-1.309 1.26 0 .638.657 1.262 1.309 1.262.99 0 1.637-.624 1.637-1.262 0-.627-.647-1.26-1.637-1.26zm7.2 0c-.647 0-1.301.633-1.301 1.26 0 .638.654 1.262 1.301 1.262.981 0 1.638-.624 1.638-1.262 0-.627-.657-1.26-1.638-1.26zM13.908 18.76c0 .915.148 1.798.404 2.641-.404.031-.811.05-1.222.05-1.634 0-2.948-.321-4.586-.632l-4.575 2.209 1.309-3.791C1.96 17.031.001 14.187.001 10.726.001 4.728 5.894.004 13.09.004c6.437 0 12.075 3.774 13.208 8.852a12.005 12.005 0 0 0-1.261-.073c-6.219 0-11.129 4.469-11.129 9.977zM8.837 5.365c-.981 0-1.971.624-1.971 1.573 0 .945.99 1.578 1.971 1.578.982 0 1.634-.633 1.634-1.578 0-.949-.652-1.573-1.634-1.573zm9.161 0c-.981 0-1.964.624-1.964 1.573 0 .945.983 1.578 1.964 1.578.986 0 1.638-.633 1.638-1.578 0-.949-.652-1.573-1.638-1.573z" class="cls-1"/></svg>
</span>
<span class="rrssb-text">Wechat</span>
</a>
</li>
<li class="rrssb-weibo">
<a class="popup" href="http://service.weibo.com/share/share.php?text=响应式分享按钮&title=响应式分享按钮&url=https://github.com/akulubala/responsive-social-buttons">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="37" height="30" viewBox="0 0 37 30"><defs><style>.cls-1{fill:#000;fill-rule:evenodd}</style></defs><path d="M36.539 12.806v.006a1.418 1.418 0 0 1-2.698-.875h-.001a6.974 6.974 0 0 0-1.456-6.82 6.965 6.965 0 0 0-6.631-2.147 1.418 1.418 0 0 1-.592-2.775h.001a9.791 9.791 0 0 1 9.327 3.022 9.803 9.803 0 0 1 2.05 9.589zm-9.818-5.3v-.001a1.22 1.22 0 1 1-.509-2.386 4.772 4.772 0 0 1 5.54 6.141 1.222 1.222 0 0 1-1.536.787 1.222 1.222 0 0 1-.785-1.538h-.002a2.332 2.332 0 0 0-2.708-3.003zm.489 2.284c.641.916.579 2.2-.012 3.688-.273.685.085.791.606.948 2.123.658 4.487 2.252 4.487 5.059 0 4.647-6.697 10.5-16.765 10.5-7.679 0-15.529-3.724-15.529-9.85 0-3.202 2.028-6.905 5.519-10.399 4.663-4.664 10.1-6.789 12.145-4.742.902.902.989 2.464.409 4.329-.302.939.881.419.881.421 3.769-1.579 7.057-1.672 8.259.046zm-1.287 9.611c-.397-4.024-5.687-6.796-11.816-6.19-6.127.607-10.774 4.361-10.376 8.386.398 4.026 5.688 6.797 11.816 6.192 6.129-.606 10.773-4.361 10.376-8.388zM11.584 26.06c-2.946-.952-4.193-3.862-2.903-6.484 1.267-2.571 4.562-4.025 7.478-3.266 3.018.78 4.558 3.629 3.325 6.395-1.251 2.831-4.848 4.34-7.9 3.355zm1.664-5.511c-.949-.398-2.175.011-2.761.93-.593.923-.314 2.022.628 2.451.956.437 2.225.022 2.818-.924.582-.956.275-2.048-.685-2.457zm2.339-.97c-.364-.145-.819.03-1.033.389-.207.36-.093.77.272.92.371.153.845-.023 1.059-.39.205-.369.072-.784-.298-.919z" class="cls-1"/></svg>
</span>
<span class="rrssb-text">Weibo</span>
</a>
</li>
<li class="rrssb-douban">
<a class="popup" href="http://shuo.douban.com/!service/share?href=https://github.com/akulubala/responsive-social-buttons&name=响应式分享按钮bb&text=响应式分享按钮&starid=0&aid=0&style=11">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="32" height="28" viewBox="0 0 32 28"><defs><style>.cls-1{fill:#000;fill-rule:evenodd}</style></defs><path d="M9.731 18.328c1.303 1.777 2.478 4.013 3.507 6.521h6.323c1.23-1.935 2.18-4.173 3.108-6.521l3.568 1.199c-.933 1.98-2.068 3.817-3.135 5.322h8.853L32 28H0v-3l9.697-.151a41.574 41.574 0 0 0-3.248-5.322l3.282-1.199zM1 0h30v3H1V0zm3.132 5.882L28 6v12H4l.132-12.118zM25 15l.126-6.162L7 9v6h18z" class="cls-1"/></svg>
</span>
<span class="rrssb-text">Douban</span>
</a>
</li>
<li class="rrssb-facebook">
<!-- Replace with your URL. For best results, make sure you page has the proper FB Open Graph tags in header:
https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/ -->
<a href="https://www.facebook.com/sharer/sharer.php?u=https://github.com/akulubala/responsive-social-buttons" class="popup">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width='24' height='24' viewBox="0 0 29 29"><path d="M26.4 0H2.6C1.714 0 0 1.715 0 2.6v23.8c0 .884 1.715 2.6 2.6 2.6h12.393V17.988h-3.996v-3.98h3.997v-3.062c0-3.746 2.835-5.97 6.177-5.97 1.6 0 2.444.173 2.845.226v3.792H21.18c-1.817 0-2.156.9-2.156 2.168v2.847h5.045l-.66 3.978h-4.386V29H26.4c.884 0 2.6-1.716 2.6-2.6V2.6c0-.885-1.716-2.6-2.6-2.6z"/></svg>
</span>
<span class="rrssb-text">facebook</span>
</a>
</li>
<li class="rrssb-instagram">
<!-- Replace href with your URL -->
<a href="http://instagram.com/dbox">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="864" height="864" viewBox="0 0 864 864"><path d="M860.079 254.436c-2.091-45.841-9.371-77.147-20.019-104.542-11.007-28.32-25.731-52.338-49.673-76.28-23.943-23.943-47.962-38.669-76.282-49.675C686.711 13.292 655.404 6.013 609.564 3.92 563.628 1.824 548.964 1.329 432 1.329s-131.63.495-177.564 2.591c-45.841 2.093-77.147 9.372-104.542 20.019-28.319 11.006-52.338 25.731-76.28 49.675-23.943 23.942-38.669 47.96-49.675 76.28C13.292 177.288 6.013 208.595 3.92 254.436 1.824 300.37 1.329 315.036 1.329 432s.495 131.628 2.591 177.564c2.093 45.84 9.372 77.146 20.019 104.541 11.006 28.319 25.731 52.339 49.675 76.282 23.942 23.941 47.961 38.666 76.28 49.673 27.395 10.647 58.701 17.927 104.542 20.019 45.935 2.096 60.601 2.592 177.564 2.592s131.628-.496 177.564-2.592c45.84-2.092 77.146-9.371 104.541-20.019 28.32-11.007 52.339-25.731 76.282-49.673 23.941-23.943 38.666-47.962 49.673-76.282 10.647-27.395 17.928-58.701 20.019-104.541 2.096-45.937 2.592-60.601 2.592-177.564s-.496-131.63-2.592-177.564zm-77.518 351.591c-1.915 41.99-8.932 64.793-14.828 79.969-7.812 20.102-17.146 34.449-32.216 49.521-15.071 15.07-29.419 24.403-49.521 32.216-15.176 5.896-37.979 12.913-79.969 14.828-45.406 2.072-59.024 2.511-174.027 2.511s-128.622-.438-174.028-2.511c-41.988-1.915-64.794-8.932-79.97-14.828-20.102-7.812-34.448-17.146-49.518-32.216-15.071-15.071-24.405-29.419-32.218-49.521-5.897-15.176-12.912-37.979-14.829-79.968-2.071-45.413-2.51-59.034-2.51-174.028s.438-128.615 2.51-174.028c1.917-41.988 8.932-64.794 14.829-79.97 7.812-20.102 17.146-34.448 32.216-49.518 15.071-15.071 29.418-24.405 49.52-32.218 15.176-5.897 37.981-12.912 79.97-14.829 45.413-2.071 59.034-2.51 174.028-2.51s128.615.438 174.027 2.51c41.99 1.917 64.793 8.932 79.969 14.829 20.102 7.812 34.449 17.146 49.521 32.216 15.07 15.071 24.403 29.418 32.216 49.52 5.896 15.176 12.913 37.981 14.828 79.97 2.071 45.413 2.511 59.034 2.511 174.028s-.44 128.615-2.511 174.027z"/><path d="M432 210.844c-122.142 0-221.156 99.015-221.156 221.156S309.859 653.153 432 653.153 653.153 554.14 653.153 432c0-122.142-99.012-221.156-221.153-221.156zm0 364.713c-79.285 0-143.558-64.273-143.558-143.557 0-79.285 64.272-143.558 143.558-143.558 79.283 0 143.557 64.272 143.557 143.558 0 79.283-64.274 143.557-143.557 143.557z"/><circle cx="661.893" cy="202.107" r="51.68"/></svg>
</span>
<span class="rrssb-text">instagram</span>
</a>
</li>
<li class="rrssb-tumblr">
<a href="http://tumblr.com/share/link?url=https://github.com/akulubala/responsive-social-buttons">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M18.02 21.842c-2.03.052-2.422-1.396-2.44-2.446v-7.294h4.73V7.874H15.6V1.592h-3.714s-.167.053-.182.186c-.218 1.935-1.144 5.33-4.988 6.688v3.637h2.927v7.677c0 2.8 1.7 6.7 7.3 6.6 1.863-.03 3.934-.795 4.392-1.453l-1.22-3.54c-.52.213-1.415.413-2.115.455z"/></svg>
</span>
<span class="rrssb-text">tumblr</span>
</a>
</li>
<li class="rrssb-stackoverflow">
<a href="http://www.stackoverflow.com">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="24" height="30" viewBox="0 0 24 30"><defs><style>.cls-1{fill:#000;fill-rule:evenodd}</style></defs><path d="M21.459 12.096L19.395.438l2.539-.432 2.064 11.658-2.539.432zm-2.59 1.577l-6.798-9.776L14.2 2.473l6.797 9.777-2.128 1.423zm-1.729 2.523L6.748 10.185l1.31-2.177 10.391 6.012-1.309 2.176zm-.88 3.155L4.609 16.279l.669-2.44 11.651 3.072-.669 2.44zm-.36 3.373L3.887 21.64l.236-2.517 12.013 1.085-.236 2.516zm.018 3.331H3.797v-2.703h12.121v2.703zm2.02-8.355h2.02l-.003 11.687s0 .59-.02.59v.01H.632s-.602 0-.602-.01H.01V17.7h2.02v10.321h15.908V17.7z" class="cls-1"/></svg>
</span>
<span class="rrssb-text">tumblr</span>
</a>
</li>
<li class="rrssb-linkedin">
<!-- Replace href with your meta and URL information -->
<a href="http://www.linkedin.com/shareArticle?mini=true&url=https://github.com/akulubala/responsive-social-buttons&title=20Responsive%20Social%20Sharing%20Buttons&summary=Responsive%20social%20icons%20by%20KNI%20Labs" class="popup">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M25.424 15.887v8.447h-4.896v-7.882c0-1.98-.71-3.33-2.48-3.33-1.354 0-2.158.91-2.514 1.802-.13.315-.162.753-.162 1.194v8.216h-4.9s.067-13.35 0-14.73h4.9v2.087c-.01.017-.023.033-.033.05h.032v-.05c.65-1.002 1.812-2.435 4.414-2.435 3.222 0 5.638 2.106 5.638 6.632zM5.348 2.5c-1.676 0-2.772 1.093-2.772 2.54 0 1.42 1.066 2.538 2.717 2.546h.032c1.71 0 2.77-1.132 2.77-2.546C8.056 3.593 7.02 2.5 5.344 2.5h.005zm-2.48 21.834h4.896V9.604H2.867v14.73z"/></svg>
</span>
<span class="rrssb-text">linkedin</span>
</a>
</li>
<li class="rrssb-xing">
<!-- Replace href with your meta and URL information -->
<a href="https://www.xing.com/spi/shares/new?url=https://github.com/akulubala/responsive-social-buttons" class="popup">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M18.89,30.708L12.023,18.67L22.681,0h7.173L19.197,18.669l6.867,12.038L18.89,30.708L18.89,30.708z M7.617,21.422l5.328-8.771L8.949,5.612H2.186l3.995,7.039l-5.327,8.771H7.617z"/></svg>
</span>
<span class="rrssb-text">xing</span>
</a>
</li>
<li class="rrssb-twitter">
<!-- Replace href with your Meta and URL information -->
<a href="https://twitter.com/intent/tweet?text=https://github.com/akulubala/responsive-social-buttons"
class="popup">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M24.253 8.756C24.69 17.08 18.297 24.182 9.97 24.62a15.093 15.093 0 0 1-8.86-2.32c2.702.18 5.375-.648 7.507-2.32a5.417 5.417 0 0 1-4.49-3.64c.802.13 1.62.077 2.4-.154a5.416 5.416 0 0 1-4.412-5.11 5.43 5.43 0 0 0 2.168.387A5.416 5.416 0 0 1 2.89 4.498a15.09 15.09 0 0 0 10.913 5.573 5.185 5.185 0 0 1 3.434-6.48 5.18 5.18 0 0 1 5.546 1.682 9.076 9.076 0 0 0 3.33-1.317 5.038 5.038 0 0 1-2.4 2.942 9.068 9.068 0 0 0 3.02-.85 5.05 5.05 0 0 1-2.48 2.71z"/></svg>
</span>
<span class="rrssb-text">twitter</span>
</a>
</li>
<li class="rrssb-reddit">
<a class="popup" href="http://www.reddit.com/submit?url=https://github.com/akulubala/responsive-social-buttons&title=RRSSB&text=Check%20out%20how%2020responsive%20these%20social%20buttons%20are">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M11.794 15.316c0-1.03-.835-1.895-1.866-1.895-1.03 0-1.893.866-1.893 1.896s.863 1.9 1.9 1.9c1.023-.016 1.865-.916 1.865-1.9zM18.1 13.422c-1.03 0-1.895.864-1.895 1.895 0 1 .9 1.9 1.9 1.865 1.03 0 1.87-.836 1.87-1.865-.006-1.017-.875-1.917-1.875-1.895zM17.527 19.79c-.678.68-1.826 1.007-3.514 1.007h-.03c-1.686 0-2.834-.328-3.51-1.005a.677.677 0 0 0-.958 0c-.264.265-.264.7 0 1 .943.9 2.4 1.4 4.5 1.402.005 0 0 0 0 0 .005 0 0 0 0 0 2.066 0 3.527-.46 4.47-1.402a.678.678 0 0 0 .002-.958c-.267-.334-.688-.334-.988-.043z"/><path d="M27.707 13.267a3.24 3.24 0 0 0-3.236-3.237c-.792 0-1.517.287-2.08.76-2.04-1.294-4.647-2.068-7.44-2.218l1.484-4.69 4.062.955c.07 1.4 1.3 2.6 2.7 2.555a2.696 2.696 0 0 0 2.695-2.695C25.88 3.2 24.7 2 23.2 2c-1.06 0-1.98.616-2.42 1.508l-4.633-1.09a.683.683 0 0 0-.803.454l-1.793 5.7C10.55 8.6 7.7 9.4 5.6 10.75c-.594-.45-1.3-.75-2.1-.72-1.785 0-3.237 1.45-3.237 3.2 0 1.1.6 2.1 1.4 2.69-.04.27-.06.55-.06.83 0 2.3 1.3 4.4 3.7 5.9 2.298 1.5 5.3 2.3 8.6 2.325 3.227 0 6.27-.825 8.57-2.325 2.387-1.56 3.7-3.66 3.7-5.917 0-.26-.016-.514-.05-.768.965-.465 1.577-1.565 1.577-2.698zm-4.52-9.912c.74 0 1.3.6 1.3 1.3a1.34 1.34 0 0 1-2.683 0c.04-.655.596-1.255 1.396-1.3zM1.646 13.3c0-1.038.845-1.882 1.883-1.882.31 0 .6.1.9.21-1.05.867-1.813 1.86-2.26 2.9-.338-.328-.57-.728-.57-1.26zm20.126 8.27c-2.082 1.357-4.863 2.105-7.83 2.105-2.968 0-5.748-.748-7.83-2.105-1.99-1.3-3.087-3-3.087-4.782 0-1.784 1.097-3.484 3.088-4.784 2.08-1.358 4.86-2.106 7.828-2.106 2.967 0 5.7.7 7.8 2.106 1.99 1.3 3.1 3 3.1 4.784C24.86 18.6 23.8 20.3 21.8 21.57zm4.014-6.97c-.432-1.084-1.19-2.095-2.244-2.977.273-.156.59-.245.928-.245 1.036 0 1.9.8 1.9 1.9a2.073 2.073 0 0 1-.57 1.327z"/></svg>
</span>
<span class="rrssb-text">reddit</span>
</a>
</li>
<li class="rrssb-vk">
<a href="http://vk.com/share.php?url=https://github.com/akulubala/responsive-social-buttons" class="popup">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="70 70 378.7 378.7"><path d="M254.998 363.106h21.217s6.408-.706 9.684-4.23c3.01-3.24 2.914-9.32 2.914-9.32s-.415-28.47 12.796-32.663c13.03-4.133 29.755 27.515 47.482 39.685 13.407 9.206 23.594 7.19 23.594 7.19l47.407-.662s24.797-1.53 13.038-21.027c-.96-1.594-6.85-14.424-35.247-40.784-29.728-27.59-25.743-23.126 10.063-70.85 21.807-29.063 30.523-46.806 27.8-54.405-2.596-7.24-18.636-5.326-18.636-5.326l-53.375.33s-3.96-.54-6.892 1.216c-2.87 1.716-4.71 5.726-4.71 5.726s-8.452 22.49-19.714 41.618c-23.77 40.357-33.274 42.494-37.16 39.984-9.037-5.842-6.78-23.462-6.78-35.983 0-39.112 5.934-55.42-11.55-59.64-5.802-1.4-10.076-2.327-24.915-2.48-19.046-.192-35.162.06-44.29 4.53-6.072 2.975-10.757 9.6-7.902 9.98 3.528.47 11.516 2.158 15.75 7.92 5.472 7.444 5.28 24.154 5.28 24.154s3.145 46.04-7.34 51.758c-7.193 3.922-17.063-4.085-38.253-40.7-10.855-18.755-19.054-39.49-19.054-39.49s-1.578-3.873-4.398-5.947c-3.42-2.51-8.2-3.307-8.2-3.307l-50.722.33s-7.612.213-10.41 3.525c-2.488 2.947-.198 9.036-.198 9.036s39.707 92.902 84.672 139.72c41.234 42.93 88.048 40.112 88.048 40.112"/></svg>
</span>
<span class="rrssb-text">vk.com</span>
</a>
</li>
<li class="rrssb-hackernews">
<a href="https://news.ycombinator.com/submitlink?u=http://www.rrssb.ml/&t=Check%20out%20how%2020responsive%20these%20social%20buttons%20are&text=Check%20out%20how%2020responsive%20these%20social%20buttons%20are">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M14 13.626l-4.508-9.19H6.588l6.165 12.208v6.92h2.51v-6.92l6.15-12.21H18.69z"/></svg>
</span>
<span class="rrssb-text">hackernews</span>
</a>
</li>
<li class="rrssb-googleplus">
<!-- Replace href with your meta and URL information. -->
<a href="https://plus.google.com/share?url=https://github.com/akulubala/responsive-social-buttons" class="popup">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21 8.29h-1.95v2.6h-2.6v1.82h2.6v2.6H21v-2.6h2.6v-1.885H21V8.29zM7.614 10.306v2.925h3.9c-.26 1.69-1.755 2.925-3.9 2.925-2.34 0-4.29-2.016-4.29-4.354s1.885-4.353 4.29-4.353c1.104 0 2.014.326 2.794 1.105l2.08-2.08c-1.3-1.17-2.924-1.883-4.874-1.883C3.65 4.586.4 7.835.4 11.8s3.25 7.212 7.214 7.212c4.224 0 6.953-2.988 6.953-7.082 0-.52-.065-1.104-.13-1.624H7.614z"/></svg> </span>
<span class="rrssb-text">google+</span>
</a>
</li>
<li class="rrssb-pocket">
<a href="https://getpocket.com/save?url=https://github.com/akulubala/responsive-social-buttons">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M28.782.002c2.03.002 3.193 1.12 3.182 3.106-.022 3.57.17 7.16-.158 10.7-1.09 11.773-14.588 18.092-24.6 11.573C2.72 22.458.197 18.313.057 12.937c-.09-3.36-.05-6.72-.026-10.08C.04 1.113 1.212.016 3.02.008 7.347-.006 11.678.004 16.006.002c4.258 0 8.518-.004 12.776 0zM8.65 7.856c-1.262.135-1.99.57-2.357 1.476-.392.965-.115 1.81.606 2.496a746.818 746.818 0 0 0 7.398 6.966c1.086 1.003 2.237.99 3.314-.013a700.448 700.448 0 0 0 7.17-6.747c1.203-1.148 1.32-2.468.365-3.426-1.01-1.014-2.302-.933-3.558.245-1.596 1.497-3.222 2.965-4.75 4.526-.706.715-1.12.627-1.783-.034a123.71 123.71 0 0 0-4.93-4.644c-.47-.42-1.123-.647-1.478-.844z"/></svg>
</span>
<span class="rrssb-text">pocket</span>
</a>
</li>
<li class="rrssb-youtube">
<a href="#">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M27.688 8.512a4.086 4.086 0 0 0-4.106-4.093H4.39A4.084 4.084 0 0 0 .312 8.51v10.976A4.08 4.08 0 0 0 4.39 23.58h19.19a4.09 4.09 0 0 0 4.107-4.092V8.512zm-16.425 10.12V8.322l7.817 5.154-7.817 5.156z"/></svg>
</span>
<span class="rrssb-text">youtube</span>
</a>
</li>
<li class="rrssb-pinterest">
<!-- Replace href with your meta and URL information. -->
<a href="http://pinterest.com/pin/create/button/?url=https://github.com/akulubala/responsive-social-buttons&media=https://github.com/akulubala/responsive-social-buttons/media/facebook-share.jpg&description=20responsive%20social%20sharing%20buttons%20by%20KNI%20Labs.">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M14.02 1.57c-7.06 0-12.784 5.723-12.784 12.785S6.96 27.14 14.02 27.14c7.062 0 12.786-5.725 12.786-12.785 0-7.06-5.724-12.785-12.785-12.785zm1.24 17.085c-1.16-.09-1.648-.666-2.558-1.22-.5 2.627-1.113 5.146-2.925 6.46-.56-3.972.822-6.952 1.462-10.117-1.094-1.84.13-5.545 2.437-4.632 2.837 1.123-2.458 6.842 1.1 7.557 3.71.744 5.226-6.44 2.924-8.775-3.324-3.374-9.677-.077-8.896 4.754.19 1.178 1.408 1.538.49 3.168-2.13-.472-2.764-2.15-2.683-4.388.132-3.662 3.292-6.227 6.46-6.582 4.008-.448 7.772 1.474 8.29 5.24.58 4.254-1.815 8.864-6.1 8.532v.003z"/></svg>
</span>
<span class="rrssb-text">pinterest</span>
</a>
</li>
<li class="rrssb-github">
<a href="https://github.com/akulubala">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M13.97 1.57c-7.03 0-12.733 5.703-12.733 12.74 0 5.622 3.636 10.393 8.717 12.084.637.13.87-.277.87-.615 0-.302-.013-1.103-.02-2.165-3.54.77-4.29-1.707-4.29-1.707-.578-1.473-1.413-1.863-1.413-1.863-1.154-.79.09-.775.09-.775 1.276.104 1.96 1.316 1.96 1.312 1.135 1.936 2.99 1.393 3.712 1.06.116-.823.445-1.384.81-1.704-2.83-.32-5.802-1.414-5.802-6.293 0-1.39.496-2.527 1.312-3.418-.132-.322-.57-1.617.123-3.37 0 0 1.07-.343 3.508 1.305A12.22 12.22 0 0 1 14 7.732c1.082 0 2.167.156 3.198.44 2.43-1.65 3.498-1.307 3.498-1.307.695 1.754.258 3.043.13 3.37a4.968 4.968 0 0 1 1.314 3.43c0 4.893-2.978 5.97-5.814 6.286.458.388.876 1.16.876 2.358 0 1.703-.016 3.076-.016 3.482 0 .334.232.748.877.61 5.056-1.687 8.7-6.456 8.7-12.08-.055-7.058-5.75-12.757-12.792-12.75z"/></svg>
</span>
<span class="rrssb-text">github</span>
</a>
</li>
<li class="rrssb-print">
<a href="javascript:window.print()">
<span class="rrssb-icon">
<svg viewbox="0 0 24 24"><path fill="#000000" d="M18,3H6V7H18M19,12A1,1 0 0,1 18,11A1,1 0 0,1 19,10A1,1 0 0,1 20,11A1,1 0 0,1 19,12M16,19H8V14H16M19,8H5A3,3 0 0,0 2,11V17H6V21H18V17H22V11A3,3 0 0,0 19,8Z"></path></svg>
</span>
<span class="rrssb-text">print</span>
</a>
</li>
<li class="rrssb-whatsapp">
<a href="whatsapp://send?text=20Responsive%20Social%20Sharing%20Buttons%3A%20http%3A%2F%2Frrssb.ml%20%7C%20http%3A%2F%2Frrssb.ml%2Frrssb-preview.png" data-action="share/whatsapp/share">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90"><path d="M90 43.841c0 24.213-19.779 43.841-44.182 43.841a44.256 44.256 0 0 1-21.357-5.455L0 90l7.975-23.522a43.38 43.38 0 0 1-6.34-22.637C1.635 19.628 21.416 0 45.818 0 70.223 0 90 19.628 90 43.841zM45.818 6.982c-20.484 0-37.146 16.535-37.146 36.859 0 8.065 2.629 15.534 7.076 21.61L11.107 79.14l14.275-4.537A37.122 37.122 0 0 0 45.819 80.7c20.481 0 37.146-16.533 37.146-36.857S66.301 6.982 45.818 6.982zm22.311 46.956c-.273-.447-.994-.717-2.076-1.254-1.084-.537-6.41-3.138-7.4-3.495-.993-.358-1.717-.538-2.438.537-.721 1.076-2.797 3.495-3.43 4.212-.632.719-1.263.809-2.347.271-1.082-.537-4.571-1.673-8.708-5.333-3.219-2.848-5.393-6.364-6.025-7.441-.631-1.075-.066-1.656.475-2.191.488-.482 1.084-1.255 1.625-1.882.543-.628.723-1.075 1.082-1.793.363-.717.182-1.344-.09-1.883-.27-.537-2.438-5.825-3.34-7.977-.902-2.15-1.803-1.792-2.436-1.792-.631 0-1.354-.09-2.076-.09s-1.896.269-2.889 1.344c-.992 1.076-3.789 3.676-3.789 8.963 0 5.288 3.879 10.397 4.422 11.113.541.716 7.49 11.92 18.5 16.223C58.2 65.771 58.2 64.336 60.186 64.156c1.984-.179 6.406-2.599 7.312-5.107.9-2.512.9-4.663.631-5.111z"/></svg>
</span>
<span class="rrssb-text">Whatsapp</span>
</a>
</li>
</ul>
</section>
<section>
<h4>圆形按钮(round buttons)</h4>
<h5>圆形按钮 标签 `ul.rrssb-buttons` 上需要加类名 `round-format fixed-size` (round buttons need add class `round-format fixed-size` to `ul.rrssb-buttons`)</h5>
<ul class="rrssb-buttons round-format fixed-size">
<li class="rrssb-email">
<a href="mailto:?Subject=Your%20Subject%20Here">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24"><path d="M21.386 2.614H2.614A2.345 2.345 0 0 0 .279 4.961l-.01 14.078a2.353 2.353 0 0 0 2.346 2.347h18.771a2.354 2.354 0 0 0 2.347-2.347V4.961a2.356 2.356 0 0 0-2.347-2.347zm0 4.694L12 13.174 2.614 7.308V4.961L12 10.827l9.386-5.866v2.347z"/></svg>
</span>
<span class="rrssb-text">email</span>
</a>
</li>
<li class="rrssb-wechat">
<a class="popup" data-url="https://github.com/akulubala/responsive-social-buttons" data-title="扫描二维码分享至微信" data-confirm-text="取消">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="36.969" height="29.031" viewBox="0 0 36.969 29.031"><defs><style>.cls-1{fill:#000;fill-rule:evenodd}</style></defs><path d="M32.399 25.866l.985 3.152-3.591-1.894c-1.31.316-2.625.631-3.928.631-6.229 0-11.134-4.099-11.134-9.146 0-5.041 4.905-9.15 11.134-9.15 5.882 0 11.119 4.109 11.119 9.15 0 2.842-1.958 5.359-4.585 7.257zM22.256 14.509c-.652 0-1.309.633-1.309 1.26 0 .638.657 1.262 1.309