diff --git a/hexagon.css b/hexagon.css
new file mode 100644
index 0000000..ca4c9c4
--- /dev/null
+++ b/hexagon.css
@@ -0,0 +1,334 @@
+/***************************************************************/
+/* Author: db0 (db0company@gmail.com, http://db0.fr/)          */
+/* Sources/Licence: https://github.com/db0company/css-hexagon  */
+/***************************************************************/
+/***************************************************************/
+/* Sizes                                                       */
+/***************************************************************/
+/* Extra Extra Small */
+.hexagon-xxs {
+  color: #ffffff;
+  text-align: center;
+  font-size: 9.799999999999999px;
+  margin: 7px 0;
+  width: 24.24871130584px;
+  height: 14px;
+  background-color: #ebebeb;
+  position: relative;
+  display: block;
+}
+.hexagon-xxs:hover {
+  color: #ffffff;
+  text-decoration: none;
+}
+.hexagon-xxs:before,
+.hexagon-xxs:after {
+  content: " ";
+  width: 0;
+  height: 0;
+  position: absolute;
+  border-left: 12.12435565292px solid transparent;
+  border-right: 12.12435565292px solid transparent;
+  left: 0;
+}
+.hexagon-xxs:before {
+  border-bottom: 7px solid #ebebeb;
+  top: -7px;
+}
+.hexagon-xxs:after {
+  border-top: 7px solid #ebebeb;
+  bottom: -7px;
+}
+/* Extra Small */
+.hexagon-xs {
+  color: #ffffff;
+  text-align: center;
+  font-size: 15.399999999999999px;
+  margin: 11px 0;
+  width: 38.10511776632px;
+  height: 22px;
+  background-color: #ebebeb;
+  position: relative;
+  display: block;
+}
+.hexagon-xs:hover {
+  color: #ffffff;
+  text-decoration: none;
+}
+.hexagon-xs:before,
+.hexagon-xs:after {
+  content: " ";
+  width: 0;
+  height: 0;
+  position: absolute;
+  border-left: 19.05255888316px solid transparent;
+  border-right: 19.05255888316px solid transparent;
+  left: 0;
+}
+.hexagon-xs:before {
+  border-bottom: 11px solid #ebebeb;
+  top: -11px;
+}
+.hexagon-xs:after {
+  border-top: 11px solid #ebebeb;
+  bottom: -11px;
+}
+/* Small */
+.hexagon-sm {
+  color: #ffffff;
+  text-align: center;
+  font-size: 30.799999999999997px;
+  margin: 22px 0;
+  width: 76.21023553264px;
+  height: 44px;
+  background-color: #ebebeb;
+  position: relative;
+  display: block;
+}
+.hexagon-sm:hover {
+  color: #ffffff;
+  text-decoration: none;
+}
+.hexagon-sm:before,
+.hexagon-sm:after {
+  content: " ";
+  width: 0;
+  height: 0;
+  position: absolute;
+  border-left: 38.10511776632px solid transparent;
+  border-right: 38.10511776632px solid transparent;
+  left: 0;
+}
+.hexagon-sm:before {
+  border-bottom: 22px solid #ebebeb;
+  top: -22px;
+}
+.hexagon-sm:after {
+  border-top: 22px solid #ebebeb;
+  bottom: -22px;
+}
+/* Medium */
+.hexagon-md {
+  color: #ffffff;
+  text-align: center;
+  font-size: 44.8px;
+  margin: 32px 0;
+  width: 110.85125168384px;
+  height: 64px;
+  background-color: #ebebeb;
+  position: relative;
+  display: block;
+}
+.hexagon-md:hover {
+  color: #ffffff;
+  text-decoration: none;
+}
+.hexagon-md:before,
+.hexagon-md:after {
+  content: " ";
+  width: 0;
+  height: 0;
+  position: absolute;
+  border-left: 55.42562584192px solid transparent;
+  border-right: 55.42562584192px solid transparent;
+  left: 0;
+}
+.hexagon-md:before {
+  border-bottom: 32px solid #ebebeb;
+  top: -32px;
+}
+.hexagon-md:after {
+  border-top: 32px solid #ebebeb;
+  bottom: -32px;
+}
+/* Large */
+.hexagon-lg {
+  color: #ffffff;
+  text-align: center;
+  font-size: 61.599999999999994px;
+  margin: 44px 0;
+  width: 152.42047106528px;
+  height: 88px;
+  background-color: #ebebeb;
+  position: relative;
+  display: block;
+}
+.hexagon-lg:hover {
+  color: #ffffff;
+  text-decoration: none;
+}
+.hexagon-lg:before,
+.hexagon-lg:after {
+  content: " ";
+  width: 0;
+  height: 0;
+  position: absolute;
+  border-left: 76.21023553264px solid transparent;
+  border-right: 76.21023553264px solid transparent;
+  left: 0;
+}
+.hexagon-lg:before {
+  border-bottom: 44px solid #ebebeb;
+  top: -44px;
+}
+.hexagon-lg:after {
+  border-top: 44px solid #ebebeb;
+  bottom: -44px;
+}
+/* Extra large */
+.hexagon-xl {
+  color: #ffffff;
+  text-align: center;
+  font-size: 84px;
+  margin: 60px 0;
+  width: 207.8460969072px;
+  height: 120px;
+  background-color: #ebebeb;
+  position: relative;
+  display: block;
+}
+.hexagon-xl:hover {
+  color: #ffffff;
+  text-decoration: none;
+}
+.hexagon-xl:before,
+.hexagon-xl:after {
+  content: " ";
+  width: 0;
+  height: 0;
+  position: absolute;
+  border-left: 103.9230484536px solid transparent;
+  border-right: 103.9230484536px solid transparent;
+  left: 0;
+}
+.hexagon-xl:before {
+  border-bottom: 60px solid #ebebeb;
+  top: -60px;
+}
+.hexagon-xl:after {
+  border-top: 60px solid #ebebeb;
+  bottom: -60px;
+}
+/***************************************************************/
+/* Colors                                                      */
+/***************************************************************/
+/* Default */
+.hexagon-default {
+  background-color: #ebebeb;
+}
+.hexagon-default:before {
+  border-bottom-color: #ebebeb;
+}
+.hexagon-default:after {
+  border-top-color: #ebebeb;
+}
+.hexagon-default.hexagon-hover:hover {
+  background-color: #cccccc;
+}
+.hexagon-default.hexagon-hover:hover:before {
+  border-bottom-color: #cccccc;
+}
+.hexagon-default.hexagon-hover:hover:after {
+  border-top-color: #cccccc;
+}
+/* Primary */
+.hexagon-primary {
+  background-color: #428bca;
+}
+.hexagon-primary:before {
+  border-bottom-color: #428bca;
+}
+.hexagon-primary:after {
+  border-top-color: #428bca;
+}
+.hexagon-primary.hexagon-hover:hover {
+  background-color: #3276b1;
+}
+.hexagon-primary.hexagon-hover:hover:before {
+  border-bottom-color: #3276b1;
+}
+.hexagon-primary.hexagon-hover:hover:after {
+  border-top-color: #3276b1;
+}
+/* Success */
+.hexagon-success {
+  background-color: #5cb85c;
+}
+.hexagon-success:before {
+  border-bottom-color: #5cb85c;
+}
+.hexagon-success:after {
+  border-top-color: #5cb85c;
+}
+.hexagon-success.hexagon-hover:hover {
+  background-color: #47a447;
+}
+.hexagon-success.hexagon-hover:hover:before {
+  border-bottom-color: #47a447;
+}
+.hexagon-success.hexagon-hover:hover:after {
+  border-top-color: #47a447;
+}
+/* Info */
+.hexagon-info {
+  background-color: #5bc0de;
+}
+.hexagon-info:before {
+  border-bottom-color: #5bc0de;
+}
+.hexagon-info:after {
+  border-top-color: #5bc0de;
+}
+.hexagon-info.hexagon-hover:hover {
+  background-color: #39b3d7;
+}
+.hexagon-info.hexagon-hover:hover:before {
+  border-bottom-color: #39b3d7;
+}
+.hexagon-info.hexagon-hover:hover:after {
+  border-top-color: #39b3d7;
+}
+/* Warning */
+.hexagon-warning {
+  background-color: #f0ad4e;
+}
+.hexagon-warning:before {
+  border-bottom-color: #f0ad4e;
+}
+.hexagon-warning:after {
+  border-top-color: #f0ad4e;
+}
+.hexagon-warning.hexagon-hover:hover {
+  background-color: #ed9c28;
+}
+.hexagon-warning.hexagon-hover:hover:before {
+  border-bottom-color: #ed9c28;
+}
+.hexagon-warning.hexagon-hover:hover:after {
+  border-top-color: #ed9c28;
+}
+/* Danger */
+.hexagon-danger {
+  background-color: #d9534f;
+}
+.hexagon-danger:before {
+  border-bottom-color: #d9534f;
+}
+.hexagon-danger:after {
+  border-top-color: #d9534f;
+}
+.hexagon-danger.hexagon-hover:hover {
+  background-color: #d2322d;
+}
+.hexagon-danger.hexagon-hover:hover:before {
+  border-bottom-color: #d2322d;
+}
+.hexagon-danger.hexagon-hover:hover:after {
+  border-top-color: #d2322d;
+}
+/***************************************************************/
+/* Inline                                                      */
+/***************************************************************/
+.hexagon-inline {
+  display: inline-block;
+}
diff --git a/hexagon.less b/hexagon.less
new file mode 100644
index 0000000..3d30012
--- /dev/null
+++ b/hexagon.less
@@ -0,0 +1,161 @@
+/***************************************************************/
+/* Author: db0 (db0company@gmail.com, http://db0.fr/)          */
+/* Sources/Licence: https://github.com/db0company/css-hexagon  */
+/***************************************************************/
+
+@xxs: 14px;
+@xs: 22px;
+@sm: 44px;
+@md: 64px;
+@lg: 88px;
+@xl: 120px;
+
+@default: #ebebeb;
+@default-hover: #cccccc;
+@primary: #428bca;
+@primary-hover: #3276b1;
+@success: #5cb85c;
+@success-hover: #47a447;
+@info: #5bc0de;
+@info-hover: #39b3d7;
+@warning: #f0ad4e;
+@warning-hover: #ed9c28;
+@danger: #d9534f;
+@danger-hover: #d2322d;
+
+@fontmultiply: 0.7;
+
+// *********************************************************** //
+// Hexagon                                                     //
+// *********************************************************** //
+
+.hexagon-content(@size, @color: white) {
+    color: @color;
+    text-align: center;
+    font-size: @size * @fontmultiply;
+    &:hover {
+	color: @color;
+	text-decoration: none;
+    }
+}
+
+.hexagon(@side : @md, @color : @default) {
+    .hexagon-content(@side);
+    @radius: @side * 0.86602540378;
+    margin: (@side / 2) 0;
+    width: @radius * 2;
+    height: @side;
+    background-color: @color;
+    position: relative;
+    display: block;
+    &:before, &:after {
+	content: " ";
+	width: 0;
+	height: 0;
+	position: absolute;
+	border-left: @radius solid transparent;
+	border-right: @radius solid transparent;
+	left: 0;
+    }
+    &:before {
+	border-bottom: (@side / 2) solid @color;
+	top: (@side / 2 * -1);
+    }
+    &:after {
+	border-top: (@side / 2) solid @color;
+	bottom: (@side / 2 * -1);
+    }
+}
+
+.hexagon-changecolor(@color) {
+    background-color: @color;
+    &:before {
+	border-bottom-color: @color;
+    }
+    &:after {
+	border-top-color: @color;
+    }    
+}
+
+/***************************************************************/
+/* Sizes                                                       */
+/***************************************************************/
+
+/* Extra Extra Small */
+.hexagon-xxs {
+    .hexagon(@xxs);
+}
+/* Extra Small */
+.hexagon-xs {
+    .hexagon(@xs);
+}
+/* Small */
+.hexagon-sm {
+    .hexagon(@sm);
+}
+/* Medium */
+.hexagon-md {
+    .hexagon(@md);
+}
+/* Large */
+.hexagon-lg {
+    .hexagon(@lg);
+}
+/* Extra large */
+.hexagon-xl {
+    .hexagon(@xl);
+}
+
+/***************************************************************/
+/* Colors                                                      */
+/***************************************************************/
+
+/* Default */
+.hexagon-default {
+    .hexagon-changecolor(@default);
+    &.hexagon-hover:hover {
+	.hexagon-changecolor(@default-hover);
+    }
+}
+/* Primary */
+.hexagon-primary {
+    .hexagon-changecolor(@primary);
+    &.hexagon-hover:hover {
+	.hexagon-changecolor(@primary-hover);
+    }
+}
+/* Success */
+.hexagon-success {
+    .hexagon-changecolor(@success);
+    &.hexagon-hover:hover {
+	.hexagon-changecolor(@success-hover);
+    }
+}
+/* Info */
+.hexagon-info {
+    .hexagon-changecolor(@info);
+    &.hexagon-hover:hover {
+	.hexagon-changecolor(@info-hover);
+    }
+}
+/* Warning */
+.hexagon-warning {
+    .hexagon-changecolor(@warning);
+    &.hexagon-hover:hover {
+	.hexagon-changecolor(@warning-hover);
+    }
+}
+/* Danger */
+.hexagon-danger {
+    .hexagon-changecolor(@danger);
+    &.hexagon-hover:hover {
+	.hexagon-changecolor(@danger-hover);
+    }
+}
+
+/***************************************************************/
+/* Inline                                                      */
+/***************************************************************/
+.hexagon-inline {
+    display: inline-block;
+}
diff --git a/hexagon.min.css b/hexagon.min.css
new file mode 100644
index 0000000..41b2f04
--- /dev/null
+++ b/hexagon.min.css
@@ -0,0 +1,5 @@
+/***************************************************************/
+/* Author: db0 (db0company@gmail.com, http://db0.fr/)          */
+/* Sources/Licence: https://github.com/db0company/css-hexagon  */
+/***************************************************************/
+.hexagon-xxs{color:#fff;text-align:center;font-size:9.799999999999999px;margin:7px 0;width:24.24871130584px;height:14px;background-color:#ebebeb;position:relative;display:block}.hexagon-xxs:hover{color:#fff;text-decoration:none}.hexagon-xxs:before,.hexagon-xxs:after{content:" ";width:0;height:0;position:absolute;border-left:12.12435565292px solid transparent;border-right:12.12435565292px solid transparent;left:0}.hexagon-xxs:before{border-bottom:7px solid #ebebeb;top:-7px}.hexagon-xxs:after{border-top:7px solid #ebebeb;bottom:-7px}.hexagon-xs{color:#fff;text-align:center;font-size:15.399999999999999px;margin:11px 0;width:38.10511776632px;height:22px;background-color:#ebebeb;position:relative;display:block}.hexagon-xs:hover{color:#fff;text-decoration:none}.hexagon-xs:before,.hexagon-xs:after{content:" ";width:0;height:0;position:absolute;border-left:19.05255888316px solid transparent;border-right:19.05255888316px solid transparent;left:0}.hexagon-xs:before{border-bottom:11px solid #ebebeb;top:-11px}.hexagon-xs:after{border-top:11px solid #ebebeb;bottom:-11px}.hexagon-sm{color:#fff;text-align:center;font-size:30.799999999999997px;margin:22px 0;width:76.21023553264px;height:44px;background-color:#ebebeb;position:relative;display:block}.hexagon-sm:hover{color:#fff;text-decoration:none}.hexagon-sm:before,.hexagon-sm:after{content:" ";width:0;height:0;position:absolute;border-left:38.10511776632px solid transparent;border-right:38.10511776632px solid transparent;left:0}.hexagon-sm:before{border-bottom:22px solid #ebebeb;top:-22px}.hexagon-sm:after{border-top:22px solid #ebebeb;bottom:-22px}.hexagon-md{color:#fff;text-align:center;font-size:44.8px;margin:32px 0;width:110.85125168384px;height:64px;background-color:#ebebeb;position:relative;display:block}.hexagon-md:hover{color:#fff;text-decoration:none}.hexagon-md:before,.hexagon-md:after{content:" ";width:0;height:0;position:absolute;border-left:55.42562584192px solid transparent;border-right:55.42562584192px solid transparent;left:0}.hexagon-md:before{border-bottom:32px solid #ebebeb;top:-32px}.hexagon-md:after{border-top:32px solid #ebebeb;bottom:-32px}.hexagon-lg{color:#fff;text-align:center;font-size:61.599999999999994px;margin:44px 0;width:152.42047106528px;height:88px;background-color:#ebebeb;position:relative;display:block}.hexagon-lg:hover{color:#fff;text-decoration:none}.hexagon-lg:before,.hexagon-lg:after{content:" ";width:0;height:0;position:absolute;border-left:76.21023553264px solid transparent;border-right:76.21023553264px solid transparent;left:0}.hexagon-lg:before{border-bottom:44px solid #ebebeb;top:-44px}.hexagon-lg:after{border-top:44px solid #ebebeb;bottom:-44px}.hexagon-xl{color:#fff;text-align:center;font-size:84px;margin:60px 0;width:207.8460969072px;height:120px;background-color:#ebebeb;position:relative;display:block}.hexagon-xl:hover{color:#fff;text-decoration:none}.hexagon-xl:before,.hexagon-xl:after{content:" ";width:0;height:0;position:absolute;border-left:103.9230484536px solid transparent;border-right:103.9230484536px solid transparent;left:0}.hexagon-xl:before{border-bottom:60px solid #ebebeb;top:-60px}.hexagon-xl:after{border-top:60px solid #ebebeb;bottom:-60px}.hexagon-default{background-color:#ebebeb}.hexagon-default:before{border-bottom-color:#ebebeb}.hexagon-default:after{border-top-color:#ebebeb}.hexagon-default.hexagon-hover:hover{background-color:#ccc}.hexagon-default.hexagon-hover:hover:before{border-bottom-color:#ccc}.hexagon-default.hexagon-hover:hover:after{border-top-color:#ccc}.hexagon-primary{background-color:#428bca}.hexagon-primary:before{border-bottom-color:#428bca}.hexagon-primary:after{border-top-color:#428bca}.hexagon-primary.hexagon-hover:hover{background-color:#3276b1}.hexagon-primary.hexagon-hover:hover:before{border-bottom-color:#3276b1}.hexagon-primary.hexagon-hover:hover:after{border-top-color:#3276b1}.hexagon-success{background-color:#5cb85c}.hexagon-success:before{border-bottom-color:#5cb85c}.hexagon-success:after{border-top-color:#5cb85c}.hexagon-success.hexagon-hover:hover{background-color:#47a447}.hexagon-success.hexagon-hover:hover:before{border-bottom-color:#47a447}.hexagon-success.hexagon-hover:hover:after{border-top-color:#47a447}.hexagon-info{background-color:#5bc0de}.hexagon-info:before{border-bottom-color:#5bc0de}.hexagon-info:after{border-top-color:#5bc0de}.hexagon-info.hexagon-hover:hover{background-color:#39b3d7}.hexagon-info.hexagon-hover:hover:before{border-bottom-color:#39b3d7}.hexagon-info.hexagon-hover:hover:after{border-top-color:#39b3d7}.hexagon-warning{background-color:#f0ad4e}.hexagon-warning:before{border-bottom-color:#f0ad4e}.hexagon-warning:after{border-top-color:#f0ad4e}.hexagon-warning.hexagon-hover:hover{background-color:#ed9c28}.hexagon-warning.hexagon-hover:hover:before{border-bottom-color:#ed9c28}.hexagon-warning.hexagon-hover:hover:after{border-top-color:#ed9c28}.hexagon-danger{background-color:#d9534f}.hexagon-danger:before{border-bottom-color:#d9534f}.hexagon-danger:after{border-top-color:#d9534f}.hexagon-danger.hexagon-hover:hover{background-color:#d2322d}.hexagon-danger.hexagon-hover:hover:before{border-bottom-color:#d2322d}.hexagon-danger.hexagon-hover:hover:after{border-top-color:#d2322d}.hexagon-inline{display:inline-block}
\ No newline at end of file