Is it possible to have an Hexagon Button CSS

Shend Tytynxhiu 0
Viewed 65

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

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?

frontend button css
5 Answers

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

FUZIION0

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>

ruckie0

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

xbique0

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:

enter image description here

userPJ1d10

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>

SteeveDroz0
Related