redvault-ai/llama_forge_rs/public/3dbutton.md

<div>
  <div>
    <button class="button" style="margin-right: 1em; margin-bottom: 1em;">
      <span>A</span>
    </button>

    <button class="button" style="margin-right: 1em;">
      <span>BB</span>
    </button>
    <button class="button">
      <span>CCCC</span>
    </button>
  </div>
  <div>
    <button class="button" style="margin-right: 1em;">
      <span>DDDDDDDDDDDDDDDDDDDDDDDDDDD</span>
    </button>
</div>

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background-color: rgb(225, 225, 225);
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

.button {
  --fl-shadow-color: rgba(5, 5, 5, 1);
  --str-shadow-color: rgba(5, 5, 5, 0.5);
  --shadow-color: rgba(5, 5, 5, 0.25);
  --lt-shadow-color: rgba(5, 5, 5, 0.1);
  
  --highlight-color: rgba(255, 255, 255, 0.25);
  --fl-highlight-color: rgba(255, 255, 255, 1);
  
  --edge-shadow: 0.15em;
  --transition: all 250ms ease;
  
  all: unset;
  cursor: pointer;
  position: relative;
  border-radius: 999vw;
  padding: 1em 1.5em;
  -webkit-tap-highlight-color: transparent;
  background-color: rgba(0, 0, 0, 0.75);
  box-shadow: 
    -0.15em -0.15em 0.15em -0.075em var(--shadow-color),
    0.15em -0.15em 0.15em -0.075em var(--lt-shadow-color),
    0.0375em 0.0375em 0.0675em 0 var(--lt-shadow-color);

  &::before,
  &::after {
    content: "";
    position: absolute;
    border-radius: inherit;
    transition: var(--transition);
  }

  &::before {
    z-index: 1;
    inset: 0.025em;
    box-shadow: 
      0 0.05em 0.05em -0.01em var(--fl-shadow-color),
      0 0.01em 0.01em -0.01em var(--str-shadow-color),
      0.15em 0.3em 0.1em -0.01em var(--shadow-color);
  }

  &::after {
    z-index: 2;
    inset: 0.0125em;
    background-image: linear-gradient(
      135deg,
      rgb(230, 230, 230),
      rgb(180, 180, 180)
    );
    clip-path: inset(0 round 999vw);
    box-shadow: 
      0 0 0 0 inset var(--shadow-color),
      -0.05em -0.05em 0.05em 0 inset var(--shadow-color),
      0 0 0.05em 0.2em inset var(--highlight-color),
      // 0.025em 0.05em 0.1em 0 inset var(--fl-highlight-color),
      -0.075em -0.25em 0.25em 0.1em inset var(--shadow-color);
  }

  &:hover {
    
    &::before {
      box-shadow: 
        0 0.05em 0.0em -0.01em var(--fl-shadow-color),
        0 0.01em 0.01em -0.01em var(--str-shadow-color),
        0.1em 0.2em 0.066em -0.01em var(--shadow-color);
    }

    &::after {
      clip-path: inset(clamp(1px, 0.0625em, 2px) round 999vw);
      box-shadow: 
        0.1em 0.15em 0.05em 0 inset var(--shadow-color),
        -0.025em -0.03em 0.05em 0.025em inset var(--shadow-color),
        0 0 0.05em 0.3em inset var(--highlight-color),
        -0.075em -0.12em 0.2em 0.1em inset var(--shadow-color);
    }
  }

  &:active {
    &::before {
      box-shadow: none;
    }

    &::after {
      --shadow-color: rgba(85, 5, 5, 0.75); // red
      --highlight-color: rgba(255, 80, 80, 0.25); // red
      
      box-shadow: 
        0.15em 0.175em 0.075em 0 inset var(--shadow-color),
        -0.025em -0.03em 0.05em 0.025em inset var(--shadow-color),
        0 0 0.05em 0.4em inset var(--highlight-color),
        -0.075em -0.12em 0.2em 0.1em inset var(--shadow-color);
    }
  }

  span {
    --text-gradient: linear-gradient(135deg, rgb(25, 25, 25), rgb(75, 75, 75));
    
    position: relative;
    z-index: 3;
    font-family: inherit;
    letter-spacing: -0.05em;
    font-weight: 500;
    color: transparent;
    background-image: var(--text-gradient);
    background-clip: text;
    transition: transform 250ms ease;
    display: block;
    text-shadow: rgba(0, 0, 0, 0.1) 0 0 0.1em;
  }

  &:hover span {
    transform: scale(0.975);
  }

  &:active span {
    transform: scale(0.95);
  }
}