Obtendo múltiplas sombras projetadas em um elemento usando CSS

Ao tentar recriar um design de botão do Photoshop em CSS, você pode encontrar uma limitação ao aplicar múltiplas sombras de caixa a um elemento único. Por padrão, o CSS permite apenas uma sombra de caixa ativa, interna ou externa.

Para superar essa limitação, você pode aproveitar o recurso de separação por vírgula fornecido pelo CSS3. Isso permite que você especifique várias definições de sombra dentro da mesma propriedade box-shadow:

box-shadow: inset 0 2px 0px #dcffa6, 0 2px 5px #000;

Separando Se você colocar as duas definições de sombra com uma vírgula, poderá criar efetivamente duas sombras distintas no elemento do botão. A primeira sombra, inserção 0 2px 0px #dcffa6, representa a sombra interna da caixa de luz, enquanto a segunda sombra, 0 2px 5px #000, cria a sombra projetada externa.

Essa técnica permite que você obtenha o botão desejado styling com duas sombras aplicadas simultaneamente, proporcionando um efeito mais realista e visualmente atraente.