CSS Hexagon Buttons

Few days ago I have created CSS Hexagon Buttons and Share it on Github as a free product under MIT License.  That is you are free to use it where ever you want. To download those buttons go to https://github.com/shariarbd/CSS3-Hexagon-Buttons. I have added four different size of Buttons and integrated with Font-Awesome.


css3 hexagon buttons
css3 hexagon buttons


The demo of the buttons is at http://shariarbd.com/demo/css3-hexagon-buttons/ and also added a nice documentation to use those buttons what you will find at http://shariarbd.com/demo/css3-hexagon-buttons/documentation/


I have added minimized css and js and following are the file structure

  • 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

In the CSS file, I have added  all class discretion and proper comments  to make it easy to understand and customize.


If you have any suggestion or query regarding this item, please feel free to drop a comment on it, I would love to update it.

If you want to create hexagon buttons by your own, I have some words for that too 🙂 see Create Hexagon Buttons 

Related Post

Bootstrap Responsive hexagon Today we will see how to create a Responsive Hexagon that will adjust automatically according to its outer container. Actually we will use bootstrap g...
Responsive isotope version 2 masonry layout Isotope is a nice script to organize and filter your portfolio or gallery item with some cool effects and functionality like masonry  layout support. ...
Color Switcher Plugin Color Switcher Plugin is a very simple plugin used to switch color style sheet in a site to change the colors of selected elements. Actually it change...
CSS Hexagon Ratio of Height Width A hexagon is a polygon with 6 edges and 6 vertex.  Following is a example of hexagon taken from Wikipedia and there you will get more details about he...

8 thoughts on “CSS Hexagon Buttons”

    1. Hi,
      Thanks for your comment

      to set an image instant of image, just replace font awesome icon i.e into image like image

      any issue regarding this, let me know.

      Thank you 🙂

    1. Hi Olaf, Sorry to late response, Do you want to add an extra border as an outer border of your hexagon? Please let me know. It's also possible

Leave a Reply

Your email address will not be published. Required fields are marked *

*