Início / coding / Perguntas / 79570177
Accepted
Joey Bennedict
Asked: 2025-04-12 15:53:35 +0800 CST

Como posso criar um botão com aparência 3D no React (TSX) com sombras como neste exemplo?

  • 772

Estou tentando criar um botão no meu projeto React usando TypeScript (TSX) que tenha uma aparência 3D semelhante à da imagem anexada:

insira a descrição da imagem aqui

Parece ter um efeito elevado e em camadas, com uma sombra que lhe dá uma sensação de profundidade. A face frontal é verde, com sombras visíveis à esquerda, inferior e direita, que lhe conferem uma aparência quadrada, quase isométrica.

Como posso replicar esse estilo em TSX e CSS? Estou procurando orientações sobre:

  • Como estruturar o JSX para tal botão (por exemplo, camadas div?)

  • Como usar CSS (ou Tailwind, se possível) para criar esta sombra e efeito 3D

  • Como mantê-lo responsivo e limpo?

css

1 respostas

  1. Best Answer

    Aqui está a replicação do botão no tailwind css https://play.tailwindcss.com/aoYLZ1DqO4 .

    e aqui está um exemplo disso no tsx:

    export default function ShadowButton() {
  return (
  <div className="relative">
    <div className="absolute z-10 h-10 w-[120px] cursor-pointer border-[none] bg-[#2eaa50] text-center leading-10 tracking-[0.4em] text-[white] select-none before:absolute before:bottom-2.5 before:left-[-25px] before:h-2.5 before:w-10 before:rotate-90 before:skew-x-[45deg] before:bg-[#50b052] before:content-[''] after:absolute after:-bottom-2.5 after:left-[-5px] after:h-2.5 after:w-[120px] after:rotate-0 after:skew-x-[-45deg] after:bg-[#237636] after:content-['']">
      CLICK
    </div>
    <div
      style={{
        clipPath:
          "polygon(11% 0, 85% 0, 100% 19%, 100% 80%, 100% 100%, 9% 100%, 0 93%, 0% 20%)"
      }}
      className="absolute left-[-10px] h-15 w-[140px] bg-black opacity-15"
    />
  </div>
  );
}
    • 0

relate perguntas