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/
  • ├── fontawesome.min.css
  • ├── hexagons.css
  • └── hexagons.min.css
  • ├── js/
  • ├── hexagons.js
  • ├── hexagons.min.js
  • ├── jquery2.1.0.min.js
  • └── jquery2.1.0.min.map
  • └── fonts/
  • ├── FontAwesome.otf
  • ├── fontawesomewebfont.eot
  • ├── fontawesomewebfont.svg
  • ├── fontawesomewebfont.ttf
  • └── fontawesomewebfont.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 

9 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 *