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

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

    <button class="button" style="margin-right: 1em;">
      <span>TEST !</span>
    </button>
    <button class="button">
      <span>-</span>
    </button>
  </div>
</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 {
  --cr-shadow-color: rgba(5, 5, 235, 0.75);
  --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);
  
  --cr-highlight-color: rgba(55, 55, 255, 0.25);
  --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);
  // outline to in shadow (fixed) [curvature of background surface]
  box-shadow:
    -0.15em -0.15em 0.15em -0.075em var(--shadow-color),  // tl
    0.15em -0.15em 0.15em -0.075em var(--shadow-color),   // tr
    -0.15em 0.15em 0.15em -0.075em var(--shadow-color),   // bl
    0.0375em 0.0375em 0.0675em 0 var(--lt-shadow-color);  // br // why different ? (improves perspective shadow feel?)

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

  &::before {
    z-index: 1;
    inset: 0.025em;
    // outline shadow perspective
    box-shadow: 
      // 0 0.05em 0.05em -0.01em var(--fl-shadow-color),   // perspective gap btm (opt)
      // 0 0.01em 0.01em -0.01em var(--str-shadow-color),  // perspective gap btm (opt)
      0.15em 0.3em 0.1em -0.01em var(--shadow-color);      // button shadow itself
  }

  &::after {
    z-index: 2;
    inset: 0.0125em;
    // main button color
    background-image: linear-gradient(
      135deg,
      rgb(230, 230, 230),
      rgb(180, 180, 180)
    );
    clip-path: inset(0 round 999vw);
    // inline shadows
    box-shadow: 
       // inline-perspective shadow
      0 0 0 0 inset var(--shadow-color), 
      
      // Rounding of the button itself
      -0.05em -0.05em 0.05em 0 inset var(--shadow-color), // button bottom
      0 0 0.05em 0.2em inset var(--highlight-color), // button top
      -0.075em -0.25em 0.25em 0.1em inset var(--shadow-color); // side
  }

  &:hover {
    &::before {
      // outline shadow perspective
      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 {
      // outline shadow perspective
      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);
  }
}

interface

• brainstorm:
  • example button equivalent?:
    • "3ds hover:3ds-depth-100 active:3ds-depth-200 active:3ds-backlight-red"
  • general config:
    • "3ds-light-angle-[120deg]" (day night cycle) 🤯
    • "3ds-component-red"
    • "3ds-surface-green"
    • "3ds-view-angle-[120deg]" ???? (rotatable perspective???) (possible???)
    • "3ds-ambient-occlusion" ?
    • "3ds-gap-light?"
    • "3ds-inline-outline-ratio?"
    • "sizes? (increased em size)"
  • open questions:
    • how to make text work ? 3ds-text required?
    • depth levels ?
      • make virtual height configurable as well?????
      • would need to compute level/ratio when outline shadow disappears
    • shrinking looks weird for components that are much wider than they are high and vice-versa

Wants

• depth

• component color

• mounting surface color

• text color ? (needed?)

• nesting?

Shadow types?

outline-depth-shadow (fixed)

inline-depth-shadow

• ambient occlusion(bot+top) + highlight

inline-perspective-shadow outline-perspective-shadow