Social Buttons for Bulma

Social Buttons for Bulma

Social Sign-In Buttons based on Bulma and Font Awesome!

View on GitHub Download

Available Classes

Available Button Sizes

is-small

default

is-medium

is-large

Check them out in real projects

Awesome Bulma Templates

Installation

1. NPM

Run npm install bulma-social

After installation, you can import the CSS file into your project using this snippet:

import 'bulma-social/bin/bulma-social.min.css'

2. HTML

A typical header would look like this:

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Buttons for Bulma!</title>
<!-- Bulma CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<!-- Bulma-Social -->
<link rel="stylesheet" href="bulma-social.min.css">
<!-- Font Awesome -->
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script>
</head>

Examples

Start using the buttons as you would normally do adding additionaly the social class. For example:

<a class="button is-medium is-github">
    <span class="icon">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
</a>

						
					

Or if you just want the icon button, use it like this:

						<a class="button is-medium is-github">
  <span class="fab fa-github"></span>
</a>

Designed with by Aldi Duzha

The source code is licensed under MIT.
The website content is licensed under CC ANS 4.0.

Available in and