Zocial CSS social buttons
I basically rewrote this entire set so they are full vector buttons, meaning:
- @font-face icons
- custom font file for all social icons
- icon font use private unicode spaces for accessibility
- em sizing based on button font-size
- support for about 83 different services
- buttons and icons supported
- no raster images (sweet)
- works splendidly on any browser supporting @font-face
- CSS3 degrades gracefully in IE8 and below etc.
- also includes generic icon-less primary and secondary buttons
How to use these buttons
<button class="zocial facebook">Button label here</button>
<a class="zocial twitter">Button label</a>
- Can be any element e.g.
- Add class of
- Add class for name of service e.g.
- Done :-)
Check out zocial.smcllns.com for code examples.
There's also a LESS version from @gustavohenke here
Problems, questions or requests to @smcllns
This project is available on CDNJS: https://cdnjs.com/libraries/css-social-buttons
How to contribute
- Install Font Custom
- Add new font in the
- Set color settings in the
- Update the
sample.htmlfile with both the button and icon.
- Test rendering. If broken go to step 2.
- Send pull-request !
Under MIT License
The GitLab logo is derived from this which is released under CC BY-NC-SA 4.0.