Social Share Buttons
Documentation
Webflow
Code
Setup: External Scripts
External Scripts in Webflow
Make sure to always put the External Scripts before the Javascript step of the resource.
In this video you learn where to put these in your Webflow project? Or how to include a paid GSAP Club plugin in your project?
HTML
Copy
Step 1: Copy structure to Webflow
Copy structure to Webflow
In the video below we described how you can copy + paste the structure of this resource to your Webflow project.
Copy to Webflow
Webflow structure is not required for this resource.
Step 1: Add HTML
HTML
Copy
<div data-social-share-title="Osmo - Start building websites people remember." data-social-share="" data-social-share-link="https://osmo.supply" class="social-share">
<button type="button" data-social-share-type="clipboard" aria-label="Copy to Clipboard" class="social-share__button"><i class="social-share__icon"><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 24 24" fill="none"><path d="M14.1256 17.262L12.6686 18.719C12.1697 19.2183 11.5773 19.6143 10.9253 19.8846C10.2733 20.1548 9.57437 20.2939 8.86857 20.2939C8.16277 20.2939 7.46389 20.1548 6.81187 19.8846C6.15984 19.6143 5.56746 19.2183 5.06857 18.719C4.56943 18.2201 4.17347 17.6277 3.90333 16.9756C3.63318 16.3236 3.49414 15.6248 3.49414 14.919C3.49414 14.2133 3.63318 13.5144 3.90333 12.8624C4.17347 12.2104 4.56943 11.618 5.06857 11.119L6.52957 9.66602" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M8.89453 14.897L15.1045 8.68701" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M9.87402 6.32198L11.331 4.86498C11.8298 4.36548 12.4221 3.96921 13.0742 3.69884C13.7262 3.42847 14.4251 3.28931 15.131 3.28931C15.8369 3.28931 16.5358 3.42847 17.1879 3.69884C17.8399 3.96921 18.4323 4.36548 18.931 4.86498C19.4303 5.36387 19.8263 5.95625 20.0966 6.60828C20.3668 7.2603 20.5059 7.95918 20.5059 8.66498C20.5059 9.37078 20.3668 10.0697 20.0966 10.7217C19.8263 11.3737 19.4303 11.9661 18.931 12.465L17.47 13.918" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg></i><i class="social-share__icon is--success"><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 24 24" fill="none" class="btn-social__icon-svg is--bigger"> <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="1.5"></path> <path d="M8 12L11 15L16 10" stroke="currentColor" stroke-miterlimit="10" stroke-width="1.5"></path> </svg></i></button>
<button type="button" data-social-share-type="mail" aria-label="Share via Mail" class="social-share__button"><i class="social-share__icon"><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 24 24" fill="none"> <path d="M7.5 9.75L10.4255 11.5536C10.8988 11.8455 11.4439 12 12 12C12.5561 12 13.1012 11.8455 13.5745 11.5536L16.5 9.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M18 5H6C4.34315 5 3 6.34315 3 8V16C3 17.6569 4.34315 19 6 19H18C19.6569 19 21 17.6569 21 16V8C21 6.34315 19.6569 5 18 5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg></i></button>
<button type="button" data-social-share-type="facebook" aria-label="Share on Facebook" class="social-share__button"><i class="social-share__icon"><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 24 24" fill="none"> <path d="M22.06 11.987C22.0597 10.0644 21.5085 8.18206 20.4717 6.56294C19.4348 4.94383 17.9558 3.6557 16.2096 2.85105C14.4635 2.04641 12.5233 1.75894 10.6188 2.02269C8.71437 2.28643 6.92535 3.09035 5.46358 4.33926C4.00181 5.58817 2.92849 7.22977 2.37071 9.06972C1.81292 10.9097 1.79401 12.8709 2.31623 14.7213C2.83845 16.5717 3.87992 18.2336 5.31735 19.5105C6.75478 20.7873 8.52797 21.6256 10.427 21.926V14.9H7.872V11.987H10.427V9.771C10.3721 9.25334 10.4318 8.72994 10.6017 8.23788C10.7716 7.74581 11.0476 7.29713 11.4101 6.92358C11.7727 6.55004 12.213 6.26079 12.6998 6.0763C13.1865 5.89181 13.7079 5.8166 14.227 5.856C14.9815 5.8675 15.7342 5.93435 16.479 6.056V8.529H15.211C14.9948 8.50024 14.7749 8.52047 14.5676 8.58821C14.3603 8.65594 14.1709 8.76945 14.0134 8.92031C13.8559 9.07118 13.7344 9.25555 13.6578 9.45975C13.5812 9.66396 13.5515 9.88278 13.571 10.1V11.987H16.362L15.915 14.9H13.571V21.93C15.9381 21.5549 18.0937 20.3474 19.6499 18.5247C21.2061 16.7019 22.0607 14.3837 22.06 11.987Z" fill="currentColor"></path> </svg></i></button>
<button type="button" data-social-share-type="pinterest" aria-label="Share on Pinterest" class="social-share__button"><i class="social-share__icon"><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 24 24" fill="none"> <path d="M12.014 2C9.686 1.99964 7.43098 2.81241 5.63852 4.2979C3.84605 5.78339 2.62873 7.84829 2.19685 10.1359C1.76497 12.4235 2.14566 14.7901 3.27315 16.8268C4.40063 18.8636 6.20411 20.4426 8.372 21.291C8.2405 20.3393 8.2523 19.3732 8.407 18.425C8.589 17.644 9.578 13.461 9.578 13.461C9.3744 12.993 9.27216 12.4873 9.278 11.977C9.278 10.591 10.084 9.551 11.085 9.551C11.2642 9.54841 11.4419 9.58421 11.6061 9.65598C11.7703 9.72776 11.9173 9.83385 12.0371 9.96713C12.157 10.1004 12.2469 10.2578 12.3008 10.4287C12.3548 10.5996 12.3716 10.7801 12.35 10.958C12.1702 12.0883 11.8935 13.2011 11.523 14.284C11.4671 14.5038 11.4637 14.7337 11.5129 14.9551C11.5621 15.1765 11.6625 15.3833 11.8062 15.5588C11.9499 15.7342 12.1328 15.8736 12.3401 15.9655C12.5475 16.0574 12.7735 16.0994 13 16.088C14.774 16.088 16.14 14.218 16.14 11.516C16.1569 10.9689 16.0597 10.4243 15.8546 9.9169C15.6495 9.40945 15.341 8.95025 14.9488 8.56854C14.5565 8.18683 14.0891 7.89095 13.5763 7.69976C13.0634 7.50856 12.5164 7.42623 11.97 7.458C11.3861 7.43299 10.8031 7.52664 10.2564 7.73329C9.70974 7.93994 9.21062 8.25531 8.78925 8.66032C8.36788 9.06533 8.03301 9.55158 7.80488 10.0897C7.57676 10.6278 7.46011 11.2065 7.462 11.791C7.46123 12.6111 7.71952 13.4104 8.2 14.075C8.23578 14.1127 8.26114 14.1591 8.27358 14.2096C8.28603 14.2601 8.28514 14.313 8.271 14.363C8.196 14.675 8.027 15.363 7.993 15.498C7.949 15.686 7.849 15.724 7.659 15.636C6.413 15.061 5.631 13.236 5.631 11.764C5.631 8.618 7.921 5.721 12.231 5.721C13.0176 5.68129 13.8042 5.80044 14.5438 6.07134C15.2834 6.34223 15.9609 6.75932 16.5358 7.29773C17.1107 7.83613 17.5712 8.48482 17.89 9.20509C18.2087 9.92535 18.3791 10.7024 18.391 11.49C18.391 14.936 16.219 17.708 13.197 17.708C12.7483 17.7228 12.303 17.6255 11.9015 17.4248C11.4999 17.2242 11.1546 16.9266 10.897 16.559L10.272 18.933C9.97516 19.8586 9.55541 20.7401 9.024 21.554C10.3977 21.9798 11.8471 22.1041 13.2732 21.9182C14.6993 21.7323 16.0685 21.2408 17.2871 20.4771C18.5057 19.7133 19.5451 18.6955 20.3342 17.4932C21.1232 16.2908 21.6434 14.9322 21.8591 13.5103C22.0748 12.0884 21.9809 10.6367 21.584 9.25445C21.187 7.87216 20.4962 6.59188 19.5589 5.50111C18.6216 4.41035 17.4599 3.53482 16.153 2.93437C14.8462 2.33392 13.4252 2.02271 11.987 2.022L12.014 2Z" fill="currentColor"></path> </svg></i></button>
<button type="button" data-social-share-type="whatsapp" aria-label="Share on WhatsApp" class="social-share__button"><i class="social-share__icon"><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 24 24" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M19.049 4.90701C17.3493 3.20721 15.0898 2.18312 12.6912 2.02547C10.2926 1.86782 7.91847 2.58735 6.01096 4.05007C4.10345 5.51278 2.7926 7.61896 2.32257 9.97633C1.85254 12.3337 2.25535 14.7816 3.456 16.864L2.049 22L7.3 20.621C8.75245 21.4124 10.3799 21.8277 12.034 21.829C13.9949 21.8301 15.912 21.2495 17.5429 20.1607C19.1737 19.072 20.445 17.5239 21.1958 15.7125C21.9467 13.9011 22.1434 11.9077 21.7611 9.98441C21.3788 8.06116 20.4346 6.29453 19.048 4.90801L19.049 4.90701ZM12.041 20.157C10.5648 20.1573 9.11572 19.76 7.846 19.007L7.546 18.827L4.428 19.644L5.261 16.605L5.066 16.293C4.38658 15.2118 3.96778 13.9875 3.84265 12.7167C3.71752 11.4459 3.88948 10.1634 4.34497 8.97049C4.80045 7.77755 5.52699 6.70681 6.46722 5.84279C7.40746 4.97877 8.53566 4.34513 9.76277 3.99188C10.9899 3.63863 12.2823 3.57544 13.538 3.8073C14.7937 4.03916 15.9783 4.55973 16.9984 5.3279C18.0184 6.09608 18.8459 7.09084 19.4156 8.23366C19.9853 9.37647 20.2816 10.6361 20.281 11.913C20.2778 14.0977 19.4088 16.192 17.8642 17.7371C16.3197 19.2822 14.2257 20.153 12.041 20.157ZM16.557 13.985C16.311 13.86 15.092 13.263 14.865 13.185C14.638 13.107 14.474 13.06 14.306 13.31C14.138 13.56 13.666 14.11 13.521 14.283C13.376 14.456 13.233 14.47 12.986 14.345C12.2559 14.0533 11.5819 13.6371 10.994 13.115C10.4534 12.6137 9.98909 12.0359 9.616 11.4C9.471 11.154 9.6 11.018 9.726 10.9C9.852 10.782 9.972 10.611 10.097 10.466C10.1992 10.3409 10.2824 10.2014 10.344 10.052C10.3769 9.98367 10.3922 9.90823 10.3887 9.83248C10.3852 9.75674 10.363 9.68304 10.324 9.61801C10.261 9.49301 9.765 8.27401 9.562 7.77801C9.359 7.28201 9.156 7.35201 9 7.34401C8.844 7.33601 8.69 7.33601 8.527 7.33601C8.40171 7.33967 8.2785 7.36898 8.16498 7.42213C8.05147 7.47527 7.95005 7.55113 7.867 7.64501C7.58693 7.9105 7.36521 8.23139 7.21594 8.58725C7.06667 8.94312 6.99313 9.32616 7 9.71201C7.08057 10.6462 7.43193 11.5365 8.011 12.274C9.07331 13.8657 10.5309 15.1541 12.241 16.013C12.831 16.267 13.292 16.419 13.651 16.537C14.156 16.6901 14.6896 16.7244 15.21 16.637C15.5548 16.567 15.8813 16.4264 16.1691 16.224C16.4569 16.0216 16.6996 15.7618 16.882 15.461C17.0444 15.0917 17.0948 14.6827 17.027 14.285C16.969 14.174 16.805 14.114 16.555 13.985H16.557Z" fill="currentColor"></path> </svg></i></button>
<button type="button" data-social-share-type="reddit" aria-label="Share on Reddit" class="social-share__button"><i class="social-share__icon"><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 24 24" fill="none"> <path d="M12 2C10.0222 2 8.08879 2.58649 6.44429 3.6853C4.7998 4.78412 3.51808 6.3459 2.7612 8.17317C2.00433 10.0004 1.80629 12.0111 2.19214 13.9509C2.578 15.8907 3.5304 17.6725 4.92893 19.0711C6.32745 20.4696 8.10928 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9996 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM16.175 5.953C16.3775 5.95404 16.5752 6.01437 16.7437 6.12655C16.9123 6.23873 17.0442 6.39783 17.1233 6.5842C17.2024 6.77057 17.2252 6.97603 17.1888 7.17519C17.1524 7.37435 17.0585 7.55849 16.9186 7.70484C16.7787 7.8512 16.599 7.95335 16.4017 7.99868C16.2043 8.04402 15.9981 8.03054 15.8083 7.95992C15.6186 7.88929 15.4537 7.76462 15.334 7.60131C15.2144 7.438 15.1452 7.2432 15.135 7.041L12.971 6.585L12.3 9.708C13.6923 9.73694 15.0466 10.1675 16.2 10.948C16.3319 10.8161 16.4889 10.7119 16.6616 10.6414C16.8344 10.571 17.0195 10.5359 17.206 10.538C17.5935 10.5385 17.9649 10.6928 18.2388 10.9669C18.5128 11.2409 18.6667 11.6125 18.667 12C18.6648 12.2801 18.585 12.5542 18.4363 12.7916C18.2877 13.0291 18.076 13.2207 17.825 13.345C17.8486 13.4881 17.8604 13.6329 17.86 13.778C17.86 16.023 15.252 17.837 12.023 17.837C8.794 17.837 6.187 16.023 6.187 13.778C6.18674 13.629 6.19845 13.4802 6.222 13.333C5.91617 13.1964 5.66655 12.9589 5.51496 12.6602C5.36337 12.3615 5.31901 12.0198 5.38932 11.6923C5.45962 11.3649 5.64031 11.0715 5.90113 10.8613C6.16195 10.6512 6.48705 10.537 6.822 10.538C7.19708 10.5417 7.55671 10.6879 7.828 10.947C8.99304 10.1499 10.3694 9.7185 11.781 9.708L12.519 6.223C12.5365 6.15554 12.5781 6.09684 12.636 6.058C12.6963 6.02278 12.7673 6.01037 12.836 6.023L15.258 6.538C15.3392 6.36323 15.4687 6.21532 15.6311 6.11167C15.7936 6.00803 15.9823 5.95297 16.175 5.953ZM9.708 12C9.50206 11.9998 9.3007 12.0607 9.12938 12.175C8.95805 12.2892 8.82447 12.4517 8.74553 12.6419C8.66658 12.8321 8.64582 13.0415 8.68588 13.2435C8.72593 13.4455 8.825 13.6311 8.97055 13.7767C9.11609 13.9224 9.30158 14.0217 9.50354 14.0619C9.7055 14.1022 9.91486 14.0816 10.1051 14.0029C10.2954 13.9241 10.4581 13.7907 10.5725 13.6195C10.6869 13.4482 10.748 13.2469 10.748 13.041C10.7475 12.7652 10.6378 12.5009 10.4429 12.3058C10.248 12.1108 9.98375 12.0008 9.708 12ZM14.292 12C14.0861 12 13.8848 12.0611 13.7136 12.1754C13.5425 12.2898 13.409 12.4524 13.3302 12.6426C13.2514 12.8328 13.2308 13.0422 13.271 13.2441C13.3112 13.446 13.4103 13.6315 13.5559 13.7771C13.7015 13.9227 13.887 14.0218 14.0889 14.062C14.2908 14.1022 14.5002 14.0815 14.6904 14.0028C14.8806 13.924 15.0432 13.7905 15.1576 13.6193C15.2719 13.4482 15.333 13.2469 15.333 13.041C15.3327 12.765 15.223 12.5004 15.0278 12.3052C14.8326 12.11 14.568 12.0003 14.292 12ZM9.737 15.325C9.683 15.3244 9.63006 15.34 9.58499 15.3698C9.53991 15.3995 9.50475 15.442 9.48401 15.4919C9.46327 15.5418 9.4579 15.5967 9.46859 15.6496C9.47927 15.7026 9.50553 15.7511 9.544 15.789C10.2548 16.3186 11.1263 16.5873 12.012 16.55C12.8979 16.592 13.7707 16.3228 14.479 15.789C14.5282 15.7373 14.5574 15.6697 14.5612 15.5984C14.5651 15.5271 14.5434 15.4567 14.5 15.4C14.4487 15.3491 14.3793 15.3205 14.307 15.3205C14.2347 15.3205 14.1653 15.3491 14.114 15.4C13.5049 15.8339 12.7668 16.0486 12.02 16.009C11.2743 16.0497 10.5371 15.8349 9.93 15.4C9.87865 15.3492 9.80925 15.3208 9.737 15.321V15.325Z" fill="currentColor"></path> </svg></i></button>
<button type="button" data-social-share-type="linkedin" aria-label="Share on LinkedIn" class="social-share__button"><i class="social-share__icon"><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 24 24" fill="none"> <path d="M19.039 19.043H16.078V14.4C16.078 13.294 16.055 11.87 14.534 11.87C12.99 11.87 12.754 13.07 12.754 14.319V19.041H9.792V9.50001H12.637V10.8H12.676C12.9609 10.3131 13.3725 9.91263 13.867 9.6411C14.3614 9.36957 14.9203 9.23717 15.484 9.25801C18.484 9.25801 19.04 11.233 19.04 13.804V19.042L19.039 19.043ZM6.447 8.19401C6.1069 8.19381 5.7745 8.09279 5.4918 7.90372C5.2091 7.71465 4.98879 7.44601 4.85874 7.13176C4.72868 6.81751 4.6947 6.47176 4.7611 6.13821C4.8275 5.80465 4.99129 5.49827 5.23178 5.25778C5.47226 5.0173 5.77865 4.8535 6.1122 4.7871C6.44575 4.72071 6.79151 4.75468 7.10575 4.88474C7.42 5.0148 7.68864 5.2351 7.87771 5.5178C8.06678 5.8005 8.1678 6.13291 8.168 6.47301C8.16826 6.69909 8.12393 6.923 8.03753 7.13192C7.95114 7.34084 7.82438 7.53066 7.66452 7.69052C7.50466 7.85039 7.31483 7.97714 7.10591 8.06354C6.89699 8.14993 6.67308 8.19427 6.447 8.19401ZM7.932 19.043H4.963V9.50001H7.932V19.043ZM20.521 2.00001H3.476C3.28445 1.99763 3.0943 2.03302 2.91643 2.10417C2.73856 2.17531 2.57646 2.28081 2.43938 2.41464C2.30231 2.54846 2.19295 2.70799 2.11756 2.8841C2.04217 3.06021 2.00222 3.24945 2 3.44101V20.559C2.00222 20.7506 2.04217 20.9398 2.11756 21.1159C2.19295 21.292 2.30231 21.4515 2.43938 21.5854C2.57646 21.7192 2.73856 21.8247 2.91643 21.8958C3.0943 21.967 3.28445 22.0024 3.476 22H20.518C20.9055 22.0051 21.2792 21.8562 21.5571 21.586C21.8349 21.3159 21.9942 20.9465 22 20.559V3.44101C21.9939 3.05359 21.8346 2.68438 21.5568 2.41427C21.279 2.14416 20.9054 1.99519 20.518 2.00001H20.521Z" fill="currentColor"></path> </svg></i></button>
<button type="button" data-social-share-type="x" aria-label="Share on X" class="social-share__button"><i class="social-share__icon"><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 24 24" fill="none"> <path d="M13.71 10.59L20.41 2.79999H18.82L13 9.55999L8.35 2.79999H3L10.03 13.03L3 21.2H4.59L10.73 14.06L15.64 21.2H21L13.71 10.59ZM11.54 13.12L10.83 12.1L5.16 3.99999H7.6L12.17 10.54L12.88 11.56L18.82 20.06H16.38L11.53 13.12H11.54Z" fill="currentColor"></path> </svg></i></button>
<button type="button" data-social-share-type="telegram" aria-label="Share on Telegram" class="social-share__button"><i class="social-share__icon"><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 24 24" fill="none"> <path d="M2.37 11.14C7.74 8.8 11.32 7.26 13.11 6.51C18.23 4.38 19.29 4.01 19.98 4C20.13 4 20.47 4.04 20.69 4.21C20.87 4.36 20.93 4.57 20.95 4.71C20.97 4.85 21 5.18 20.98 5.43C20.7 8.34 19.5 15.41 18.89 18.67C18.63 20.05 18.12 20.51 17.63 20.56C16.56 20.66 15.75 19.85 14.71 19.17C13.09 18.11 12.17 17.45 10.6 16.41C8.78 15.21 9.96 14.55 11 13.48C11.27 13.2 15.98 8.91 16.07 8.52C16.08 8.47 16.09 8.29 15.98 8.19C15.87 8.09 15.72 8.13 15.6 8.15C15.44 8.19 12.85 9.9 7.83 13.28C7.1 13.78 6.43 14.03 5.83 14.02C5.17 14.01 3.91 13.65 2.97 13.34C1.82 12.97 0.9 12.77 0.98 12.13C1.02 11.8 1.48 11.46 2.35 11.11L2.37 11.14Z" fill="currentColor"></path> </svg></i></button>
</div>HTML structure is not required for this resource.
Step 2: Add CSS
CSS
Copy
.social-share {
grid-column-gap: .5em;
grid-row-gap: .5em;
flex-flow: wrap;
justify-content: center;
align-items: center;
display: flex;
}
.social-share__button {
color: #4f4c4c;
-webkit-appearance: none;
appearance: none;
background-color: #fff;
border-radius: 50%;
justify-content: center;
align-items: center;
width: 3em;
height: 3em;
display: flex;
position: relative;
overflow: hidden;
}
.social-share__icon {
width: 1.5em;
display: flex;
}
.social-share__icon.is--success {
position: absolute;
}
/* Clipboard Success Icon */
[data-social-share-type="clipboard"] .social-share__icon {
transition: transform 0.4s cubic-bezier(0.625, 0.05, 0, 1);
transform: translateY(0%) rotate(0.001deg);
}
[data-social-share-type="clipboard"] .social-share__icon.is--success {
color: #009E3B;
transform: translateY(200%) rotate(0.001deg);
}
[data-social-share-type="clipboard"][data-social-share-success] .social-share__icon {
transform: translateY(-200%) rotate(0.001deg);
}
[data-social-share-type="clipboard"][data-social-share-success] .social-share__icon.is--success {
transform: translateY(0%) rotate(0.001deg);
}
/* Optional hover styling */
[data-social-share-type] {
transition: all 0.4s cubic-bezier(0.625, 0.05, 0, 1);
transform: scale(1) rotate(0.001deg);
}
[data-social-share]:has([data-social-share-type]:hover) [data-social-share-type] {
transform: scale(0.9) rotate(0.001deg);
}
[data-social-share]:has([data-social-share-type]:hover) [data-social-share-type]:hover {
transform: scale(1.1) rotate(0.001deg);
}
/* Optional color styling */
[data-social-share-type="linkedin"] {color: #0A66C2;}
[data-social-share-type="x"] {color: #000000;}
[data-social-share-type="facebook"] {color: #1877F2;}
[data-social-share-type="pinterest"] {color: #E60023;}
[data-social-share-type="whatsapp"] {color: #25D366;}
[data-social-share-type="reddit"] {color: #FF4500;}
[data-social-share-type="telegram"] {color: #0088CC;}Step 2: Add custom Javascript
Custom Javascript in Webflow
In this video, Ilja gives you some guidance about using JavaScript in Webflow:
Step 2: Add Javascript
Step 3: Add Javascript
Javascript
Copy
function initSocialShare() {
document.querySelectorAll('[data-social-share]').forEach(root => {
if (root._socialShareBound) return;
root._socialShareBound = true;
const link = root.getAttribute('data-social-share-link') || location.href;
const title = root.getAttribute('data-social-share-title') || document.title;
root.addEventListener('click', e => {
const btn = e.target.closest('[data-social-share-type]');
if (!btn) return;
e.preventDefault();
const type = btn.getAttribute('data-social-share-type');
const u = encodeURIComponent(link);
const t = encodeURIComponent(title);
const map = {
x: `https://twitter.com/intent/tweet?text=${t}&url=${u}`,
linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${u}`,
reddit: `https://www.reddit.com/submit?url=${u}&title=${t}`,
telegram: `https://t.me/share/url?url=${u}&text=${t}`,
whatsapp: `https://api.whatsapp.com/send?text=${t}%20${u}`,
mail: `mailto:?subject=${t}&body=${t}%0A%0A${u}`,
facebook: `https://www.facebook.com/sharer/sharer.php?u=${u}`,
pinterest: `https://www.pinterest.com/pin/create/button/?url=${u}&description=${t}`,
};
if (type === 'clipboard') {
navigator.clipboard.writeText(link).then(() => {
btn.setAttribute('data-social-share-success', '');
setTimeout(() => btn.removeAttribute('data-social-share-success'), 2000);
});
return;
}
const url = map[type];
if (url) window.open(url, '_blank', 'noopener,noreferrer');
});
});
}
// Initialize Social Share
document.addEventListener('DOMContentLoaded', () => {
initSocialShare();
});Step 3: Add custom CSS
Step 2: Add custom CSS
Custom CSS in Webflow
Curious about where to put custom CSS in Webflow? Ilja explains it in the below video:
CSS
Copy
/* Clipboard Success Icon */
[data-social-share-type="clipboard"] .social-share__icon {
transition: transform 0.4s cubic-bezier(0.625, 0.05, 0, 1);
transform: translateY(0%) rotate(0.001deg);
}
[data-social-share-type="clipboard"] .social-share__icon.is--success {
color: #009E3B;
transform: translateY(200%) rotate(0.001deg);
}
[data-social-share-type="clipboard"][data-social-share-success] .social-share__icon {
transform: translateY(-200%) rotate(0.001deg);
}
[data-social-share-type="clipboard"][data-social-share-success] .social-share__icon.is--success {
transform: translateY(0%) rotate(0.001deg);
}
/* Optional hover styling */
[data-social-share-type] {
transition: all 0.4s cubic-bezier(0.625, 0.05, 0, 1);
transform: scale(1) rotate(0.001deg);
}
[data-social-share]:has([data-social-share-type]:hover) [data-social-share-type] {
transform: scale(0.9) rotate(0.001deg);
}
[data-social-share]:has([data-social-share-type]:hover) [data-social-share-type]:hover {
transform: scale(1.1) rotate(0.001deg);
}
/* Optional color styling */
[data-social-share-type="linkedin"] {color: #0A66C2;}
[data-social-share-type="x"] {color: #000000;}
[data-social-share-type="facebook"] {color: #1877F2;}
[data-social-share-type="pinterest"] {color: #E60023;}
[data-social-share-type="whatsapp"] {color: #25D366;}
[data-social-share-type="reddit"] {color: #FF4500;}
[data-social-share-type="telegram"] {color: #0088CC;}Implementation
Container
Use [data-social-share] to group all share buttons. Add [data-social-share-link] to define the URL that will be shared. Add [data-social-share-title] to define the title included in the share message.
Buttons
Use [data-social-share-type] on each button to set the platform. Supported types are: x, linkedin, reddit, telegram, whatsapp, mail, facebook, pinterest, and clipboard.
Clipboard: Success
When copying a link with [data-social-share-type="clipboard"], a temporary [data-social-share-success] attribute is added for two seconds to indicate success. We use this to show the "success" icon via CSS.
Resource details
Last updated
October 6, 2025
Category
Utilities & Scripts
Need help?
Join Slack
Original source
Dennis SnellenbergCreator Credits
We always strive to credit creators as accurately as possible. While similar concepts might appear online, we aim to provide proper and respectful attribution.