Materialize Social

Social Login Buttons for Materailize CSS with Font-Awesome
View Code on Github


Just add either the .social or .social-icon to any Materialize button along with the auth providers class and BAM! Instant login buttons.


  • Examples

  •                       
<a class="waves-effect waves-light btn social google">
<i class="fa fa-google"></i> Sign in with Google</a>
                      
                    
  •                       
<a class="waves-effect waves-light btn-large social google">
<i class="fa fa-google"></i> Sign in with Google</a>
                      
                    
  •                       
<div class="row">
  <a class="waves-effect waves-light btn col s12 social google">
  <i class="fa fa-google"></i> Sign in with Google</a>
</div>

                      
                    
  •                       
<a class="waves-effect waves-light btn-floating social google">
<i class="fa fa-google"></i> Sign in with Google</a>
                      
                    
  •                       
<a class="waves-effect waves-light btn-floating btn-large social google">
<i class="fa fa-google"></i> Sign in with Google</a>
                      
                    
  •                       
<a class="waves-effect waves-light social-icon btn google">
<i class="fa fa-google"></i></a>
                      
                    
  •                       
<a class="waves-effect waves-light social-icon btn-large google">
<i class="fa fa-google"></i></a>
  • See bottom corner of the screen
    menu 
                          
<div class="fixed-action-btn horizontal click-to-toggle">
  <a class="btn-floating btn-large red">
      <i class="material-icons">menu</i>
  </a>
  <ul>
      <li>
          <a class="waves-effect waves-light btn-floating social google"><i class="fa fa-google"></i></a>
      </li>
      <li>
          <a class="waves-effect waves-light btn-floating facebook"><i class="fa fa-facebook"></i></a>
      </li>
      <li>
          <a class="waves-effect waves-light btn-floating github"><i class="fa fa-github"></i></a>
      </li>
  </ul>
</div>


How to use

  1. Include Materialize CSS and Font Awesome

    If you haven't done that already, include the latest Materialize CSS and Font Awesome in your project.

  2. Get the CSS and LESS

    npm install --save materialize-social
                        
    bower install --save materialize-social

  3. Include the CSS or Less

    You have two options for enabling the social buttons in your project: vanilla CSS or source Less. For vanilla CSS, just include the materialize-social.css file into your project. For Less, copy the materialize-social.less into your existing styles directory and import it into your base less file with @import "materialize-social.less";. Recompile when ready.

  4. Add some buttons!

    See above for examples

Special thanks to Bootstrap Social for the inspiration!