Pessoal, fiz o código e funcionou tudo de forma idêntica ao vídeo mas não consegui deixar de me incomodar com o fato de que o botão 'crescido' acabe ultrapassando a margem da página. Por mais que seja apenas durante o hover causa estranheza a margem bem definida até ali ser suplantada por uma animação.
Pesquisei diversas propriedades CSS mas não encontrei nada que me resolvesse. Queria saber se há uma forma de fazermos a animação crescer apenas para o outro lado respeitando a mesma margem padronizada da página.
Muito obrigado!
Edit:
Após pesquisar mais e testar, a única solução cabível que achei foi ao invés de usar scale dentro do hover como no Exemplo 1, aplicar width como no exemplo 2.
Exemplo 1: .enviar:hover { background: darkorange; transform: scale(1.2); }
Exemplo 2: .enviar:hover { background: darkorange; width: 50%; }
Entendo que seja uma solução mas não é exatamente o que eu queria, nem sei se é possível...