<div>
  <button class="open anchor" autofocus><span>⚓︎</span></button>

  <article class="anchor-positioned">
    Lorem ipsum dolor sit amet
  </article>
</div>

@layer base, demo;

@layer demo {
  .anchor {
    anchor-name: --myAnchor;
  }
  .anchor-positioned {
    position: fixed;
    position-anchor: --myAnchor;
    top: anchor(bottom);
    justify-self: anchor-center;
  }
}

@layer base {
  body {
    font-family: -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Roboto,
      Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100svh;
    background: hsl(0 0% 6%);
    gap: 2rem;
  }

  body::before {
    --line: hsl(0 0% 95% / 0.35);
    content: "";
    height: 100vh;
    width: 100vw;
    position: fixed;
    background: linear-gradient(90deg, var(--line) 1px, transparent 1px 10vmin)
        0 -5vmin / 10vmin 10vmin,
      linear-gradient(var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin
        10vmin;
    mask: radial-gradient(
      ellipse at 50% 50%,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0) 70%
    );
    top: 0;
    z-index: -1;
  }

  *:not(dialog) {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  .open {
    width: 62px;
    height: 62px;
    cursor: pointer;
    border: 1px solid #15181a;
    background: #33393e;
    border-radius: 100%;
    background: no-repeat center center,
      -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3c4349), color-stop(100%, #252a2d));
    box-shadow: 0px -3px 2px 0px #212428 inset, 0px 2px 2px #535d65 inset,
      0px 2px 2px -1px #050606, 0px 7px 4px -1px #1a1d1f;
    &:hover {
      background: #33393e;
      background: no-repeat center center,
        -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #252a2d), color-stop(100%, #3c4349));
      box-shadow: 0px -3px 2px 0px #212428 inset, 0px 2px 2px #535d65 inset,
        0px 2px 2px -1px #050606, 0px 7px 4px -1px #1a1d1f;
      & span {
        background-image: -webkit-linear-gradient(
          90deg,
          rgba(255, 145, 0, 1) 0%,
          rgba(255, 214, 1, 1) 100%
        );
      }
    }
    &:focus {
      outline: 3px solid cyan;
    }
    & span {
      font-size: 2rem;
      color: transparent;
      background: white;
      background-size: cover;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(2px 2px 5px #000);
    }
  }

  .anchor-positioned {
    background-color: white;
    padding: 1rem;
    border-radius: 15px;
  }
}