CSS3 Hexagon Buttons


CSS3 Hexagon Buttons created with pure CSS3 and also used javaScript for flexibility.
Four Different button size hexagon buttons integrated with Font Awesome.
Ease to use and customize. Well organized CSS file with proper comments 
 
Files Structure are as follows 
assets/
├── css/
│   ├── font-awesome.min.css
│   ├── hexagons.css
│   └── hexagons.min.css 
├── js/
│   ├── hexagons.js
│   ├── hexagons.min.js
│   ├── jquery-2.1.0.min.js
│   └── jquery-2.1.0.min.map
└── fonts/
    ├── FontAwesome.otf
    ├── fontawesome-webfont.eot
    ├── fontawesome-webfont.svg
    ├── fontawesome-webfont.ttf
    └── fontawesome-webfont.woff
 
Class Description 
hb         = Hexagon Buttons
hb-custom  = Custom Hexagon Buttons
hb-lg      = Large Hexagon        = width : 256px
hb-md      = Medium Hexagon       = width : 128px
hb-sm      = Small Hexagon        = width : 64px
hb-xs      = Extra Small Hexagon  = width : 32px
spin                =  Spin hole button on hover
spin-icon        =  Spin icon on hover
inv                  =  Inverse Behaver of buttons 

 

We have integrated CSS3 Hexagon Buttons and crated some classes to control/Create Hexagon. There are four different size of Buttons and also spin and hover effects. 
See the below html code 
 
<a href="#">
  <span class="hb hb-xs">
    <i class="fa fa-facebook"></i>
  </span>
</a>
We have write some javaScript for hexagon buttons and that script first search button size class and inject a class to it's parent for proper margin. 
 
In the above code hb-xs class defines that it's a extra small hexagon button and JS will inject a class hb-xs-margin which will set the proper margin for that hexagon button. 
 
 And then, JS will search for Font Awesome Social Buttons Class listed on the JS library and inject associated class with the hb class for button color and hover colors.
 
In the above code, we have added a facebook icon and that's why JS will inject a class hb-facebook with the hb class and if it found inv class with hb class, it will inject hb-facebook-inv for inverse color behavior for button.
 
Also see that the above code defines a link, If you don't want to use the link, than replace a tag into span like below 
 
<span>
  <span class="hb hb-xs">
    <i class="fa fa-facebook"></i>
  </span>
</span >
 

 

CSS3 Hexagon Buttons setup is very easy 

Add the Font Awesome css file inside the head tag 

<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css"> 

then add the CSS of Hexagon button 

<link rel="stylesheet" type="text/css" href="assets/css/hexagons.css"> 

or 

<link rel="stylesheet" type="text/css" href="assets/css/hexagons.min.css"> 

Now add jQuery library and JS file for Hexagon Buttons before the </body> tag

<script src="assets/js/jquery-2.1.0.min.js"></script>
<script src="assets/js/hexagons.js"></script>

or 

<script src="assets/js/jquery-2.1.0.min.js"></script>
<script src="assets/js/hexagons.min.js"></script>

 

Now you have to add buttons on the html page, there are some demo as follows 

<a href="#"><span class="hb hb-xs"><i class="fa fa-facebook"></i></span></a>
<a href="#"><span class="hb hb-sm spin-icon"><i class="fa fa-twitter"></i></span></a> 

See the description part to chose your class what you need. 

Now it's time to rock smiley

Now see the index.html file  and use your buttons.

To customize existing style, please edit hexagon.css and hexagon.js accordingly.