How to make a border around clip path shape? [duplicate] - html

Question

This question already has answers here:
Hexagon shape with a border/outline
(7 answers)
Closed 3 years ago.
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>

Answer 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.