Create a hexagonal button in css

When I browse the plethora of advanced css styling techniques available to us today I can’t help but feel pampered. When I began my career, shaped buttons were only possible by slicing images with a matching background color. Now we can drop a couple of css properties and create amazing-looking buttons of all shapes and sizes.

Enough chit-chat. Let’s get to it.

This hexagonal button makes use of the css clip-path property to create a hex-shaped polygon. It will look something like this:

clip-path: polygon(7% 0, 93% 0, 100% 50%, 93% 100%, 7% 100%, 0 50%);

Setup a button selector to start. Mine has background transition included for fun:

.btn {
  display:inline-block;
  position: relative;
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
  padding: 15px 50px;
  text-align: center;
  clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
  background-color: #161213;
  background-image: radial-gradient(200% 70% at center 20%, rgba(48,44,45,1) -30%, rgba(50,46,47,1) 49%, rgba(22,18,19,1) 50%, rgba(22,18,19,1) 150%);
  background-repeat: no-repeat;
  transition: background-position-y ease-in-out 250ms;
}

.btn:hover {
  background-position-y: -50px;
}

And a simple anchor to render our custom hex button:

<a href="#" class="btn">My Hex Button</a>

My Hex Button

So there you go.
Now if you want to take it a step further and add a drop-shadow, you’ll need to do some extra work. This will be less usable when theming existing markup since it needs an additional element, but if you’re building your own buttons or making a component it will work great.

.btn-2 {
  filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.6));
}
.btn-2 span {
  display:inline-block;
  position: relative;
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
  padding: 15px 50px;
  text-align: center;
  clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
  background-color: #161213;
  background-image: radial-gradient(200% 70% at center 20%, rgba(48,44,45,1) -30%, rgba(50,46,47,1) 49%, rgba(22,18,19,1) 50%, rgba(22,18,19,1) 150%);
  background-repeat: no-repeat;
  transition: background-position-y ease-in-out 250ms;
}

.btn-2:hover span {
  background-position-y: -50px;
}

<a href="#" class="btn-2"><span>Button + Shadow</span></a>

Button + Shadow

Okay, now you have a fancy hexagonal to impress your friends, so start hex-dropping in your next site build. If you want to modify this button now, hop over to the codepen: https://codepen.io/rhino-corey/pen/yLMKWmb