Share buttons interface
1 .gg-share { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 6px ;
7 height: 6px ;
8 background: currentColor;
9 border-radius: 100px ;
10 box-shadow:
11 10px -6px 0 ,
12 10px 6px 0 13 } 14 15 .gg-share::after ,
16 .gg-share::before { 17 content: "";
18 display: block;
19 box-sizing: border-box;
20 position: absolute;
21 border-radius: 3px ;
22 width: 10px ;
23 height: 2px ;
24 background: currentColor;
25 left: 2px 26 } 27 28 .gg-share::before { 29 top: 0 ;
30 transform: rotate(-35deg )
31 } 32 33 .gg-share::after { 34 bottom: 0 ;
35 transform: rotate(35deg )
36 }
1 <svg 2 width="24 " 3 height="24 " 4 viewBox="0 0 24 24 " 5 fill="none" 6 xmlns="http://www.w3 .org/2000 /svg" 7 > 8 <path 9 d="M18 9 C19.6569 9 21 7.65685 21 6 C21 4.34315 19.6569 3 18 3 C16.3431 3 15 4.34315 15 6 C15 6.12549 15.0077 6.24919 15.0227 6.37063 L8.08261 9.84066 C7.54305 9.32015 6.80891 9 6 9 C4.34315 9 3 10.3431 3 12 C3 13.6569 4.34315 15 6 15 C6.80891 15 7.54305 14.6798 8.08261 14.1593 L15.0227 17.6294 C15.0077 17.7508 15 17.8745 15 18 C15 19.6569 16.3431 21 18 21 C19.6569 21 21 19.6569 21 18 C21 16.3431 19.6569 15 18 15 C17.1911 15 16.457 15.3202 15.9174 15.8407 L8.97733 12.3706 C8.99229 12.2492 9 12.1255 9 12 C9 11.8745 8.99229 11.7508 8.97733 11.6294 L15.9174 8.15934 C16.457 8.67985 17.1911 9 18 9 Z" 10 fill="currentColor" 11 /> 12 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledShare = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 6px ;11 height: 6px ;12 background: currentColor;13 border-radius: 100px ;14 box-shadow: 10px -6px 0 , 10px 6px 0 ;15 } 16 &::after , 17 &::before { 18 content: '';19 display: block;20 box-sizing: border-box;21 position: absolute;22 border-radius: 3px ;23 width: 10px ;24 height: 2px ;25 background: currentColor;26 left: 2px ;27 } 28 &::before { 29 top: 0 ;30 transform: rotate(-35deg );31 } 32 &::after { 33 bottom: 0 ;34 transform: rotate(35deg );35 } 36 ` 37 38 export const Share = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 39 (props, ref) => { 40 return ( 41 <> 42 <StyledShare { ...props} ref={ ref} icon-role="share" /> 43 </> 44 ) 45 } , 46 ) 47
Share developed into a magic pure CSS icon created by adopting attributes like: transform, width, height, background, border-radius, box-shadow,
