Creating Hexagon Buttons with Pure CSS/CSS3

Preview:

Description:

A cool CSS/CSS3 solution to create stylish hexagon buttons in multiple sizes, built only with CSS3 transform and transitions. There are four different size of Buttons and also spin and hover effects.

How to use it:

Include the required hexagons.css into the head section of the web page.

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

Add the appropriate CSS classes to an element to make a hexagon button.

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

That’s it. You can also include the jQuery library and the hexagons.js to make the hexagon buttons more flexible.

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="path/to/hexagons.min.js"></script>

The CSS helpers.

hb: Hexagon Buttons
hb-custom: Custom Hexagon Buttons
hb-lg: Large Hexagon, 256px
hb-md: Medium Hexagon, 128px
hb-sm: Small Hexagon, 64px
hb-xs: Extra Small Hexagon, 32px
spin: Spin hole button on hover
spin-icon: Spin icon on hover
inv: Inverse Behaver of buttons