Is it possible to have an Hexagon Button CSS

Question

I'm trying to create a button that looks like this for my website:

But I just don't know how to do that in CSS. To make matters worse I can't even find a tutorial on YouTube about this specific design. Can anyone teach me?

After checking our favourite search engine: https://duckduckgo.com/?q=css+hexagon+border&t=chromentp&ia=web, the best one looks to be: https://jtauber.github.io/articles/css-hexagon.html — Paul, Sep 12 '22 at 08:48
@Paul do you have a specific link, I can't find this anywhere — Shend Tytynxhiu, Sep 12 '22 at 08:50

FUZIION · Accepted Answer · 2022-09-12T09:16:13.510

2

You can accomplish this by creating a button with a ::before element, style that ::before element as a hexagon and position it infront of the button.

This is what I've made using the pseudo element ::before, styling it as a hexagon using clip-path.

div.wrapper {
  margin: 100px;
  height: 500px;
  width: 500px;
}
html,
body {
  width: 100%;
  height: 100%;
}

a.button {
  z-index: 1;
  background-color: #883333;
  padding: 25px 50px;
  position: relative;
}

a.button::before {
  z-index: 0;
  content: "";
  background-color: #ff3333;
  left: -50px;
  top: -18px;
  position: absolute;
  width: 100px;
  height: 100px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

<div class="wrapper">
  <a href="#" class="button">FUZIION</a>
</div>

CodePen

edited Sep 12 '22 at 09:16

answered Sep 12 '22 at 08:59

FUZIION

1,606
1
6
19

1

Hi please add some code to your answer, otherwise it's better as a comment on the original post. – Nathaniel Flick Sep 12 '22 at 09:04
can you please provide me a code example. I would appretiate that a lot – Shend Tytynxhiu Sep 12 '22 at 09:05
1

I am writing some right now – FUZIION Sep 12 '22 at 09:07
1

Added the code example, let me know if this helps you @Shend – FUZIION Sep 12 '22 at 09:16
yep it's good. I'll just play with the values! Thanks a lot again – Shend Tytynxhiu Sep 12 '22 at 09:18

score 2 · Answer 2 · answered Sep 12 '22 at 09:18

Based on this threat Hexagon shape with CSS3, you can do something like this.

      .hexagon-button {
        width: 300px;
      }
      .button-content {
        position: absolute;
        width: 300px;
        height: 80px;
        margin: 20px 70px;
        border-radius: 1em;
        background: rgb(34, 187, 174);
        display: flex;
        justify-content: center;
        color: white;
        align-items: center;
        z-index: -1;
      }
      .part1 {
        width: 0;
        border-bottom: 30px solid #6c6;
        border-left: 52px solid transparent;
        border-right: 52px solid transparent;
      }
      .part2 {
        width: 104px;
        height: 60px;
        background-color: #6c6;
      }
      .part3 {
        width: 0;
        border-top: 30px solid #6c6;
        border-left: 52px solid transparent;
        border-right: 52px solid transparent;
      }

 <a href="#" class="hexagon-button">
      <div class="button-content">Register</div>
      <div class="part1"></div>
      <div class="part2"></div>
      <div class="part3"></div>
    </a>

xbique · Answer 3 · 2022-09-12T09:22:18.907

Actually, you can use with clip-path and find out clip-path generator on Google or somethings like that

here for you


button {
  background: rgb(58,185,148);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 1rem 2rem;
  position: relative;
}

button::before {
  content: '';
  position: absolute;
  left: -4.125rem;
  top: -0.5rem;
  width: 7rem;
  height: 7rem;
  background: rgb(58,185,148);
  clip-path: polygon(24% 13%, 50% 0, 76% 13%, 76% 43%, 49% 55%, 24% 44%);
}

<button>
  REGISTER
</button>

codepen

score 0 · Answer 4 · answered Sep 12 '22 at 09:37

CSS is good, but have you considered SVG?

Using external <a> (rectangular link)

<a href="#">
  <svg width="28" height="32">
    <polygon points="14,0 28,8 28,24 14,32 0,24 0,8" />
  </svg>
</a>

Using internal<a> (pixel perfect link)

<svg width="28" height="32">
  <a href="#">
    <polygon points="14,0 28,8 28,24 14,32 0,24 0,8" />
  </a>
</svg>

Note that you can change the size by adding a viewBox and changing the width and height:

<svg width="200" height="200" viewBox="0 0 28 32">
  <a href="#">
    <polygon points="14,0 28,8 28,24 14,32 0,24 0,8" />
  </a>
</svg>

Alexander · Answer 5 · 2022-09-12T09:01:45.420

-1

You can try to do it with css. Google "hexagon"

However, it is difficult, unreliable and time consuming. Much easier and more correct to use SVG.

Like this:

edited Sep 12 '22 at 09:01

answered Sep 12 '22 at 08:53

Alexander

291
4
13

1

Hi, please add a code example in place of "Google _____" – Dan Carter Sep 12 '22 at 09:09
@DanCarter, all code examples that make triangles are crutches and I can't recommend them at all. My answer focuses on using SVG instead of CSS perversions. – Alexander Sep 12 '22 at 09:25

Is it possible to have an Hexagon Button CSS

5 Answers5