<nav role="navigation" aria-label="Pagination Navigation">
  <ul class="pagination" role="list">
    <li><a href="#" aria-label="Current Page, Page 1" aria-current="true" title="1">1</a></li>
    <li><a href="#" aria-label="Go to page 2" title="2">2</a></li>
    <li><a href="#" aria-label="Go to page 3" title="3">3</a></li>
    <li><a href="#" aria-label="Go to page 4" title="4">4</a></li>
    <li><a href="#" aria-label="Go to page 5" title="5">5</a></li>
    <li><a href="#" aria-label="Go to page 6" title="6">6</a></li>
    <li><a href="#" aria-label="Go to page 7" title="7">7</a></li>
  </ul>
</nav>

@import url('https://fonts.googleapis.com/css2?family=Handlee&display=swap');


.pagination {  
  --move-0: .6;
  --move-1: .4;
  --move-2: .2;
  display: flex;
  list-style: none;
}

li a {
  display: flex;
  align-items: center;
  width: 100px;
  height: 150px;
  font-size: 0;
  text-decoration: none;
}

li a::before {
  --move: 0;
  --lightness: 18%;
 
  background: hsl(330deg 100% var(--lightness));
  transform: translateY(calc(var(--move) * -60%));
  
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  text-decoration: none;
  padding-top: 5px;
  width: 100%;
  width: 80px;
  height: 80px;
  font-size: 2rem;
  border-radius: 50%;
  transition: transform .2s ease-out, background .2s ease-out, box-shadow .3s ease;
  content: attr(title);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px;
}

a:is(:hover, :focus)::before {
  --move: var(--move-0);
  --lightness: 45%;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

li:has(+li a:is(:hover, :focus))     a::before, 
li:has(a:is(:hover, :focus)) + li a::before {
  --move: var(--move-1);
  --lightness: 31%;
}

li:has(+li + li a:is(:hover, :focus)) a::before, 
li:has(a:is(:hover, :focus)) + li + li a::before {
  --move: var(--move-2);
  --lightness: 21%;
}

/* Generic body styling */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  min-height: 100vh;
  font-family: 'Handlee', cursive;
  background-image: radial-gradient(circle at 50%, #CEC3C1, #E2E1E0);
}