The world's most generic agency ever

Social button

Category Buttons
File button-social.scss
Author/s Vittorio Vittori

This should be used to connect social accounts to the project service.
It requires Font Awesome http:

HTML example

HTML code

Click to copy

<a href="#" class="button-social button-social--facebook">
    <div class="button-social__icon"><i class="fa fa-facebook"></i></div>
    <div class="button-social__network">facebook</div>
</a>

Twitter

Author/s Vittorio Vittori

This twitter version has also button-social--with-effects modifier to show drop shadow effects

HTML example

HTML code

Click to copy

<a href="#" class="button-social button-social--twitter button-social--with-effects">
    <div class="button-social__icon"><i class="fa fa-twitter"></i></div>
    <div class="button-social__network">twitter</div>
</a>

Github

Author/s Vittorio Vittori

The GitHub version with button-social--small and button-social--with-effects modifiers.

HTML example

HTML code

Click to copy

<a href="#" class="button-social button-social--github button-social--with-effects button-social--small">
    <div class="button-social__icon"><i class="fa fa-github-alt"></i></div>
    <div class="button-social__network">github</div>
</a>

Google Plus

Author/s Vittorio Vittori

The Google Plus version has also button-social--small modifier to make it smaller.

HTML example

HTML code

Click to copy

<a href="#" class="button-social button-social--google-plus button-social--small">
    <div class="button-social__icon"><i class="fa fa-google-plus"></i></div>
    <div class="button-social__network">googe plus</div>
</a>

Facebook

Author/s Vittorio Vittori

This Facebook version has also button-social--big modifier to make it bigger.

HTML example

HTML code

Click to copy

<a href="#" class="button-social button-social--facebook button-social--big">
    <div class="button-social__icon"><i class="fa fa-facebook"></i></div>
    <div class="button-social__network">facebook</div>
</a>

Facebook

Author/s Vittorio Vittori

This Facebook version has also button-social--rounded modifier to set it with rounded corners.

HTML example

HTML code

Click to copy

<a href="#" class="button-social button-social--facebook button-social--big button-social--rounded">
    <div class="button-social__icon"><i class="fa fa-facebook"></i></div>
    <div class="button-social__network">facebook</div>
</a>

Total examples 6