Svelte Social Buttons
-Pro Component
Pure CSS Svelte social buttons with plenty of examples. Also, easy to extend or add new brands.
Examples
<BaseButton icon className="btn-facebook btn-icon">
<span class="btn-inner--icon">
<i class="fab fa-facebook" />
</span>
<span class="btn-inner--text">Facebook</span>
</BaseButton>
<BaseButton icon className="btn-twitter">
<span class="btn-inner--icon">
<i class="fab fa-twitter" />
</span>
<span class="btn-inner--text">Twitter</span>
</BaseButton>
<BaseButton icon className="btn-google-plus">
<span class="btn-inner--icon">
<i class="fab fa-google-plus-g" />
</span>
<span class="btn-inner--text">Google +</span>
</BaseButton>
<BaseButton icon className="btn-instagram">
<span class="btn-inner--icon">
<i class="fab fa-instagram" />
</span>
<span class="btn-inner--text">Instagram</span>
</BaseButton>
<BaseButton icon className="btn-pinterest">
<span class="btn-inner--icon">
<i class="fab fa-pinterest" />
</span>
<span class="btn-inner--text">Pinterest</span>
</BaseButton>
<BaseButton icon className="btn-youtube">
<span class="btn-inner--icon">
<i class="fab fa-youtube" />
</span>
<span class="btn-inner--text">Youtube</span>
</BaseButton>
<BaseButton icon className="btn-vimeo">
<span class="btn-inner--icon">
<i class="fab fa-vimeo-v" />
</span>
<span class="btn-inner--text">Vimeo</span>
</BaseButton>
<BaseButton icon className="btn-slack">
<span class="btn-inner--icon">
<i class="fab fa-slack" />
</span>
<span class="btn-inner--text">Slack</span>
</BaseButton>
<BaseButton icon className="btn-dribbble">
<span class="btn-inner--icon">
<i class="fab fa-dribbble" />
</span>
<span class="btn-inner--text">Dribbble</span>
</BaseButton>
Icon only
<BaseButton className="btn-facebook btn-icon-only">
<span class="btn-inner--icon">
<i class="fab fa-facebook" />
</span>
</BaseButton>
<BaseButton className="btn-twitter btn-icon-only">
<span class="btn-inner--icon">
<i class="fab fa-twitter" />
</span>
</BaseButton>
<BaseButton className="btn-google-plus btn-icon-only">
<span class="btn-inner--icon">
<i class="fab fa-google-plus-g" />
</span>
</BaseButton>
<BaseButton className="btn-instagram btn-icon-only">
<span class="btn-inner--icon">
<i class="fab fa-instagram" />
</span>
</BaseButton>
<BaseButton className="btn-pinterest btn-icon-only">
<span class="btn-inner--icon">
<i class="fab fa-pinterest" />
</span>
</BaseButton>
<BaseButton className="btn-youtube btn-icon-only">
<span class="btn-inner--icon">
<i class="fab fa-youtube" />
</span>
</BaseButton>
<BaseButton className="btn-vimeo btn-icon-only">
<span class="btn-inner--icon">
<i class="fab fa-vimeo-v" />
</span>
</BaseButton>
<BaseButton className="btn-slack btn-icon-only">
<span class="btn-inner--icon">
<i class="fab fa-slack" />
</span>
</BaseButton>
<BaseButton className="btn-dribbble btn-icon-only">
<span class="btn-inner--icon">
<i class="fab fa-dribbble" />
</span>
</BaseButton>
<hr />
<BaseButton round className="btn-facebook btn-icon-only">
<span class="btn-inner--icon">
<i class="fab fa-facebook" />
</span>
</BaseButton>
<BaseButton round className="btn-twitter btn-icon-only">
<span class="btn-inner--icon">
<i class="fab fa-twitter" />
</span>
</BaseButton>
<BaseButton round className="btn-google-plus btn-icon-only">
<span class="btn-inner--icon">
<i class="fab fa-google-plus-g" />
</span>
</BaseButton>
<BaseButton round className="btn-instagram btn-icon-only">
<span class="btn-inner--icon">
<i class="fab fa-instagram" />
</span>
</BaseButton>
<BaseButton round className="btn-pinterest btn-icon-only">
<span class="btn-inner--icon">
<i class="fab fa-pinterest" />
</span>
</BaseButton>
<BaseButton round className="btn-youtube btn-icon-only">
<span class="btn-inner--icon">
<i class="fab fa-youtube" />
</span>
</BaseButton>
<BaseButton round className="btn-vimeo btn-icon-only">
<span class="btn-inner--icon">
<i class="fab fa-vimeo-v" />
</span>
</BaseButton>
<BaseButton round className="btn-slack btn-icon-only">
<span class="btn-inner--icon">
<i class="fab fa-slack" />
</span>
</BaseButton>
<BaseButton round className="btn-dribbble btn-icon-only">
<span class="btn-inner--icon">
<i class="fab fa-dribbble" />
</span>
</BaseButton>
Circle
Add the
.rounded-circle
modifier class to create a fully rounded button.
<BaseButton round className="btn-facebook btn-icon-only">
<span class="btn-inner--icon">
<i class="fab fa-facebook" />
</span>
</BaseButton>
<BaseButton round className="btn-twitter btn-icon-only">
<span class="btn-inner--icon">
<i class="fab fa-twitter" />
</span>
</BaseButton>
<BaseButton round className="btn-google-plus btn-icon-only">
<span class="btn-inner--icon">
<i class="fab fa-google-plus-g" />
</span>
</BaseButton>
<BaseButton round className="btn-instagram btn-icon-only">
<span class="btn-inner--icon">
<i class="fab fa-instagram" />
</span>
</BaseButton>
<BaseButton round className="btn-pinterest btn-icon-only">
<span class="btn-inner--icon">
<i class="fab fa-pinterest" />
</span>
</BaseButton>
<BaseButton round className="btn-youtube btn-icon-only">
<span class="btn-inner--icon">
<i class="fab fa-youtube" />
</span>
</BaseButton>
<BaseButton round className="btn-vimeo btn-icon-only">
<span class="btn-inner--icon">
<i class="fab fa-vimeo-v" />
</span>
</BaseButton>
<BaseButton round className="btn-slack btn-icon-only">
<span class="btn-inner--icon">
<i class="fab fa-slack" />
</span>
</BaseButton>
<BaseButton round className="btn-dribbble btn-icon-only">
<span class="btn-inner--icon">
<i class="fab fa-dribbble" />
</span>
</BaseButton>