پیشنمایش زنده
کد HTML
<section class="matrix">
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
<button class="button"></button>
</section>
کد CSS
.matrix {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(10, 1fr);
border-radius: 15px;
overflow: hidden;
width: 300px;
height: 300px;
gap: -1px;
box-shadow:
inset -1px -1px 0px #555,
inset 1px 1px 0px #555,
inset -1px 1px 0px #555,
/*4 smth u wont rly notice*/ inset 1px -1px 0px #555;
z-index: -1;
}
.button {
all: unset;
background: #555;
border-radius: 1.5px;
cursor: cell;
transition: 5s;
z-index: 5;
}
.button:hover {
background: #00000000;
transition: 0.3s;
z-index: 5;
}