# :penguin: share / connect / support buttons *You are probably tired of seeing this everywhere* ![preview screen](uncool.png?raw=true) *How about *this instead?* ![preview screen](cool.png?raw=true) _*inspired by [FSFE](https://fsfe.org/contribute/contribute.en.html) buttons_ Make your visitors wonder what those icons represent. __Help promoting federated, privacy-friendly networks__. #### [DEMO page](https://distributopia.gitlab.io/share-connect-support) ## What are these? These are social buttons for your personal blog, profile. They can be added to any page, including static websites. ## Usage The collection of buttons is basically a set of SVGs and some styles. #### 1. Install Copy [`styles.min.css`](/public/styles.min.css) and [`share.min.js`](/public/share.min.js) into your project directory. You will also find unminified versions in [public](/public) folder. > **Note:** Only sharing buttons require the script. If you intend to use connect or support buttons, add just the styles file. #### 2. Include Include `styles.min.css` with a `` tag in the `` of your page, and `share.min.js` with a ` ``` Include icons that you plan to use as `` in ``. You'll find all available SVGs in [example page](/public/index.html) code. This way of using SVGs provides easy manipulation. ```html ``` #### 3. Use Now add buttons referencing SVGs in `` tag, like so: ```html ``` > **Note:** Don't forget to replace demo `href` URL with your link. Sharing buttons are a bit more complex. They require a script mentioned above and an overlay input. ```html ``` ## Styling Following utility classes are provided to change button styling. 1. `.rounded` - rounded corners 2. `.oval` - more rounded corners 3. `.circle` - circle icon 4. `.wo-text` - fixed width (34px by default) for buttons without text For more examples see [demo page](/public/index.html). ## Examples Some websites using these buttons: *To include yours, please, add a link below and open a merge request* - [fediverse.partyn](https://fediverse.party)