CSS3 social buttons vol.2
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
scss
README.md
index.html

README.md

CSS3 social buttons vol.2

CSS3 social buttons with css3 transitions

Demo

Check Demo Here

Check CSS3 social buttons hover effects vol.1 More great effects!

Check Here

How to use:

  1. Create <div></div> tag. Add class "effect" to it and class of the effect you've picked. It will be a container for our social links.
<div class="effect varrius">
</div>
  1. Put all the social links into this div (copy please structure from the codepen demo). You can use links from the demo or create your own links with social media you need. Icons in <i></i> tags you can find on FontAwesome website, for example - here is the github icon
<div class="effect aeneas">
  <a href="#" class="fb" title="Join us on Facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>
  <a href="#" class="tw" title="Join us on Twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
  <a href="#" class="g-plus" title="Join us on Google+"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
</div>
  1. Then you need to put link on Fontawesome css file in your file <head></head> tag, before your own style.css file:
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>

You can find here more about putting FontAwesome on your website.

  1. Then you need to work with CSS file (or with SCSS file if you want to). In both ways you need to add styles.css to your html file, in the <head></head> tag:
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
  <link rel="stylesheet" href="css/styles.css" />
</head>
  1. Then in both ways you need:
  • open file (CSS or SCSS) and delete all the content between common styles !!!YOU DON'T NEED THEM comment and common link styles !!!YOU NEED THEM comment. All these styles were created to make codepen demo more beautiful, if you keep these styles they can make mess in your website appearance.

  • uncomment this line and remove my text:

  .effect {
    /*display: flex; !!!uncomment this line !!!*/ 
  }

And now enjoy pretty social links animation!