0

I am trying to create hexagon shaped buttons that have a transparent background and white 1px solid border around the hexagon I created with clip path. However, when I apply a border part of it is cut off. How can I achieve this look?

Here is my code:

  .project-button div{
      position: relative;
      display: inline-block;
      padding: 1rem;
      margin: 0 1rem 1rem 1rem;
      
      color: #d9d9d9;
      font-size: 1rem;
      font-weight: 700;
      border: 1px solid white;
    
      -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
      clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
      
     
      background-repeat: no-repeat;
      transition: background-size .5s, color .5s;
    }
    
    .to-top {
        background-position: 50% 100%;
        background-size: 100% 0%;
      }
    
    .project-button div:hover {
        background-size: 100% 100%;
        background-image: linear-gradient(white, white);
        color: #51d0de;
    }
<div class="project-button">
   <div class="to-top>View Code"></div>
</div>
Ram Segev
  • 2,563
  • 2
  • 12
  • 24
klaurtar
  • 233
  • 3
  • 23

1 Answers1

1

This is what i Got so far,
I've used filter: drop-shadow()

For your transparent background you can use same color as parent

.hexagon{
  background: white;/*giving color is important*/
  padding: 40px;
  width: 20%;
  text-align: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
/* main code */
.container{
  filter: drop-shadow(0px 0px 1px black);
}
  <div class="container">
    <div class="hexagon">Button</div> 
  </div>

I hope it helps.

Note: filter is used on parent div.

Ankit
  • 181
  • 2
  • 15