I'm attempting to design hexagon-shaped buttons with a transparent background and a white 1px border around the hexagon shape I've created using clip path. However, when I add the border, it gets cut off at parts. How can I fix this issue?
Below 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>