Attempting what should be a simple task, but hitting roadblocks. I have a basic button with a shimmer hover effect and now want to apply the same effect to a hexagon-shaped button. My initial idea was to overlay the button with a clip-path (ignoring browser support), but unfortunately, the pseudo-element interferes with the clip-path, rendering it useless. Is there something obvious that I'm missing here? Or is the combination of these two elements just not feasible?
.button {
outline:none;
border:none;
padding:20px;
display:block;
margin:0 auto;
cursor:pointer;
font-size:16px;
font-weight: bold;
background-color:#DBBD68;
text-transform: uppercase;
position:relative;
transition:all 0.5s ease;
overflow: hidden;
color:#fff;
&.hex{
width: 280px;
height: 280px;
position:absolute;
top: 0;
left:0;
-webkit-clip-path: polygon(20% 50%, 12% 60%, 20% 70%, 82% 70%, 89% 60%, 80% 50%);
clip-path: polygon(20% 50%, 12% 60%, 20% 70%, 82% 70%, 89% 60%, 80% 50%);
}
&:before {
content: '';
background-color: rgba(255,255,255,.5);
width:100%;
height:20px;
position:absolute;
left:-135px;
transform: rotateZ(45deg)
}
I've created a Fiddle to demonstrate the issue: https://jsfiddle.net/0m5wmvu8/