I have
.grid-texture {
background-size: 4px 4px;
background-image: linear-gradient(90deg, transparent, transparent 3px, rgba(0, 0, 0, 0.07) 4px), linear-gradient(transparent, transparent 3px, rgba(0, 0, 0, 0.07) 4px);
position: relative;
z-index: 1;
min-height: 100vh;
}
.btn {
position: absolute;
left: 50%;
top: 50%;
}<div class="grid-texture"></div>
<div class="btn">
<button class="btn">Button</button>
</div>And I got this:
So, button becomes unavailable for use.
And now question: How do I make it so that I can push the button through the grid-texture?
OR
How to "overlay" the grid texture on top of all html elements, while maintaining the functionality of buttonsa and etc?
>Solution :
Add pointer-events: none; to grid-texture
.grid-texture {
background-size: 4px 4px;
background-image: linear-gradient(90deg, transparent, transparent 3px, rgba(0, 0, 0, 0.07) 4px), linear-gradient(transparent, transparent 3px, rgba(0, 0, 0, 0.07) 4px);
position: relative;
z-index: 1;
min-height: 100vh;
pointer-events: none;
}
.btn {
position: absolute;
left: 50%;
top: 50%;
}<div class="grid-texture"></div>
<div class="btn">
<button class="btn">Button</button>
</div>