Zocial CSS Social Buttons
The idea is to create beautiful social buttons using only CSS, rendering popular social icons as a font, and requiring minimal extra markup.
Benefits
- Buttons always look sharp at any size and screen resolution.
- Easily customize the size and call to action of the buttons.
- Easily localize button text to other languages.
Usage
- Can be any element e.g.
a,div,buttonetc. - Add class of
.zocialand add class for name of service e.g..dropbox,.twitter,.github - Optional: Add a class of icon to display as icon instead of button
- Optional: Change font size of the element to resize button
There's also a LESS version from @gustavohenke here
Examples:
<button class="zocial facebook">Sign in with Facebook</button>
or
<a class="zocial twitter">Follow Me</a>
Demo
https://smcllns.github.io/css-social-buttons/
Browser Support
- custom font file for all social icons works well in any browser supporting @font-face
- icon font use private unicode spaces for accessibility
- CSS3 degrades gracefully in IE8 and below
CDN
This project is available on CDNJS:
https://cdnjs.com/libraries/css-social-buttons
How to contribute
- Install Font Custom
- Add or update the icon .svg in the
src/folder. - Set the button and font color in
templates/zocial.cssfile. - Run
fontcustom compile - Update the demo page (
index.html) with both the button and icon. - Test rendering. If broken go to step 2.
- Send pull-request !
License
Under MIT License
The GitLab logo is derived from this which is released under CC BY-NC-SA 4.0.
