Criando componente snackbar com JavaScript e CSS \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 09 Horas 26 Min 20 Seg Tempo restante da oferta: 09 26 20 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Criando componente snackbar com JavaScript e CSS [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) # Criando componente snackbar com JavaScript e CSS Nesse artigo, você irá ter o passo a passo de como criar um componente de snackbar do zero. Sendo capaz de adapta-lo como preferir. [ Amauri Blanco Corrêa ](https://www.treinaweb.com.br/blog/autor/amauri) 3 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/05/Criando_componente_snackbar_com_JavaScript_e_CSS.jpg) O componente de snackbar é um dos mais utilizados no Front-end. Com ele, nós desenvolvedores, podemos enviar informações importantes aos usuários. É uma forma elegante de avisar, por exemplo, que o usuário enviou corretamente as informações a um formulário, ou, até mesmo, avisos sobre o cadastro. Nesse artigo vou ensinar de forma simples, como você pode criar seu próprio snackbar. [ ![HTML5 + CSS3 - Box model e Posicionamento de Elementos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Box model e Posicionamento de Elementos Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-box-model-e-posicionamento-de-elementos) ## Iniciando o componente de snackbar Primeiramente, você precisa de uma estrutura, você precisará criar o [HTML](https://www.treinaweb.com.br/blog/guia-da-linguagem-html "HTML"), após essa estrutura, vamos a estilização e criação dos eventos com [JavaScript](https://www.treinaweb.com.br/blog/guia-da-linguagem-javascript "JavaScript"). Para esse exemplo, vou criar um botão, ele será o gatilho que irá disparar o evento que mostrará o componente snackbar. Vou criar o componente apenas com um campo para texto. ```html Clique Aqui Mensagem ao usuário! ``` Essa estrutura foi criada já pensando em como capturar esses elementos no JavaScript, esse é o motivo pelo qual já adicionei os id’s em cada um dos elementos. ### Estilizando o elemento Agora que temos a estrutura básica em HTML, vamos estilizá-la para criar um visual atraente para nosso snackbar. Aqui está um exemplo básico de estilo. Lembrando que a estilização vai de projeto para projeto, essa parte você é livre para deixar o componente de snackbar do jeito que achar melhor. ```css #snackbar { visibility: hidden; position: absolute; left: 50%; bottom: 20px; z-index: 1; transform: translateX(-50%); min-width: 250px; background-color: #29ad65; box-shadow: 4px 4px 6px 4px #00000059; color: #fff; text-align: center; font-size: 17px; border-radius: 2px; padding: 5px 10px; } #snackbar.show { visibility: visible; animation: fadein 0.5s, fadeout 0.5s 2.5s; } @keyframes fadein { from { bottom: 0; opacity: 0; } to { bottom: 20px; opacity: 1; } } @keyframes fadeout { from { bottom: 20px; opacity: 1; } to { bottom: 0; opacity: 0; } } ``` [ ![HTML5 + CSS3 - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-fundamentos) Vamos entender melhor o que está acontecendo aqui. Inicialmente, o componente de snackbar precisa ficar escondido, por isso, é usada a propriedade `visibility: hidden;`, pois, só queremos mostrá-lo quando o botão for clicado. As propriedades `position`, `bottom`, `left` e `transform` servem para que o elemento permaneça sempre ao centro da tela na parte inferior. Um ponto aqui é que você pode, caso haja necessidade, deixar o componente de snackbar onde preferir. Movendo apenas conforme o necessário. Caso queira ter o domínio completo dos tipos de position e como controlá-los, no curso [HTML5 + CSS3 - Box model e Posicionamento de Elementos](https://www.treinaweb.com.br/curso/html5-css3-box-model-e-posicionamento-de-elementos "HTML5 + CSS3 - Box model e Posicionamento de Elementos") eu mostro em detalhes como fazer. Após isso, coloquei uma largura fixa e alterei a cor de fundo, cor de texto, tamanho do texto, posicionamento, preenchimento interno e arredondei as bordas. Novamente, essas estilizações não impactam no comportamento do componente, servem apenas para deixar com um visual mais agradável. Estilizado da forma como eu queria, basta alterar a visibilidade do elemento quando ele possuir a classe `show`. Essa classe irá trocar a visibilidade e adicionar uma animação que fará com que o componente de snackbar apareça e saia de uma forma suave. ## Adicionando comportamento com JavaScript Agora, vamos adicionar a lógica em JavaScript para fazer o snackbar aparecer quando o botão for clicado: ```javascript const trigger = document.getElementById("snackbar-trigger"); trigger.addEventListener('click', function () { var snackbar = document.getElementById("snackbar"); snackbar.className = "show"; setTimeout(function () { snackbar.className = snackbar.className.replace("show", ""); }, 3000); }); ``` Este código JavaScript seleciona o botão pelo seu ID e adiciona um evento de clique. Quando o botão é clicado, ele adiciona a classe “show” ao snackbar, fazendo com que ele apareça. Lembrando que, quando ele aparecer, o componente irá iniciar a animação que fizemos com CSS. Em seguida, é utilizada a função setTimeout para remover a classe “show” após 3 segundos, fazendo com que o snackbar desapareça. Com isso, agora você tem um snackbar básico funcionando em sua página. Claro, você pode personalizar o estilo e o comportamento conforme necessário para atender às suas necessidades específicas. Caso você tenha seguido o passo a passo, terá algo parecido com isso: ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/05/exemplo-componente-snackbar.gif) [ ![HTML5 + CSS3 - Construindo sites semânticos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Construindo sites semânticos Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-construindo-sites-semanticos) ## Conclusão Em resumo, o snackbar aparece como um dos componentes mais utilizados no Front-end, oferecendo aos desenvolvedores uma maneira elegante de comunicar informações cruciais aos usuários. Neste artigo, iniciamos com a criação da estrutura HTML e sua estilização, e adicionamos o comportamento dinâmico com JavaScript. Esta abordagem simplificada proporciona não apenas a compreensão do processo de criação do snackbar, mas também a flexibilidade para personalizar conforme as exigências específicas do projeto. Assim, o desenvolvedor tem a habilidade de integrar de maneira eficaz esse componente fundamental em suas interfaces web, aprimorando a experiência do usuário de forma eficiente e agradável. - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) - [ #HTML ](https://www.treinaweb.com.br/blog/tag/html) - [ #Animações CSS ](https://www.treinaweb.com.br/blog/tag/animacoes-css) - [ #JavaScipt ](https://www.treinaweb.com.br/blog/tag/javascipt) Autor ![Amauri Blanco Corrêa](//secure.gravatar.com/avatar/98d195107c5e3e8d91ee13c18f2a8f34?d=mm) ## Amauri Blanco Corrêa Sou formado em Análise e Desenvolvimento de Sistemas pela Universidade Cruzeiro do Sul, uma pessoa extremamente curiosa e dedicada, amo tecnologia e sempre busco aprender e aperfeiçoar meus conhecimentos. Atuo há mais de 3 anos como desenvolvedor e instrutor Front-end sou um eterno estudante do mundo da tecnologia. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/amauri) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/02/18175820/RAZOR-COMPONENTS-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 8 anos atrás ## [ .NET Core 3.0 - Criando componentes no Razor Components ](https://www.treinaweb.com.br/blog/net-core-3-0-criando-componentes-no-razor-components) Veja neste artigo como é a estrutura de um componente do Razor Componente e aprenda a criar um. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/02/criando-componentes-tailwindcss-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Criando componentes com Tailwind CSS ](https://www.treinaweb.com.br/blog/criando-componentes-com-tailwind-css) Neste artigo veremos por que os componentes nos ajudam durante o desenvolvimento do nosso projeto e como conseguimos criá-los com Tailwind CSS Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/criando-um-drawer-navigator-com-flutter-400x280.png) [ Flutter ](https://www.treinaweb.com.br/blog/categoria/flutter) 6 anos atrás ## [ Criando um drawer navigator com Flutter ](https://www.treinaweb.com.br/blog/criando-um-drawer-navigator-com-flutter) Veja neste artigo como criar um drawer navigator com Flutter. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/24110903/O-QUE-E-REACT-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Criando aplicações React com Vite e TypeScript ](https://www.treinaweb.com.br/blog/criando-aplicacoes-react-com-vite-e-typescript) Neste artigo veremos como criar aplicações React com Vite, que permite desenvolvermos aplicações modernas com recursos como HMR, entre outros. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/criando-interfaces-graficas-no-c-com-gtk-400x280.png) [ C ](https://www.treinaweb.com.br/blog/categoria/c) 6 anos atrás ## [ Criando interfaces gráficas no C com GTK ](https://www.treinaweb.com.br/blog/criando-interfaces-graficas-no-c-com-gtk) Aplicações Desktop ainda são muito utilizadas. Neste artigo aprenda como utilizar o GTK para criar interfaces gráficas no C. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/01/25164926/imagem-capa-curriculo-400x280.png) [ Tecnologia ](https://www.treinaweb.com.br/blog/categoria/tecnologia) 8 anos atrás ## [ Criando um Portfólio com o Pingendo ](https://www.treinaweb.com.br/blog/criando-um-portfolio-com-o-pingendo) Neste artigo veremos como criar uma pequena página web para que você possa utilizá-la como Portfólio utilizando a ferramenta Pingendo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/05/01125223/react-php-imagem-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 7 anos atrás ## [ Trabalhando com Sockets no ReactPHP ](https://www.treinaweb.com.br/blog/trabalhando-com-sockets-no-reactphp) Veremos neste artigo como usar o componente de socket do ReactPHP para criar um chat pelo terminal. Além disso, veremos as bases para a construção de servidores TCP/IP. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/09/05155108/React-Hooks-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 7 anos atrás ## [ React: Conheça o Poder dos Hooks ](https://www.treinaweb.com.br/blog/react-conheca-o-poder-dos-hooks) Conheça o que os React Hooks podem fazer e como eles vão facilitar o processo de desenvolvimento da sua próxima aplicação. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/04/23151422/ARQUITETURA-FLUX-400x280.png) [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 8 anos atrás ## [ Flux - descubra o motivo do sucesso dessa arquitetura em grandes empresas ](https://www.treinaweb.com.br/blog/flux-descubra-o-motivo-do-sucesso-dessa-arquitetura-em-grandes-empresas) Conheça a Arquitetura Flux e entenda o motivo dela estar se tornando cada vez mais requisitada no mercado de trabalho ao se desenvolver sistemas. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/spring-framework-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 3 anos atrás ## [ Spring Boot - Trabalhando com Controllers ](https://www.treinaweb.com.br/blog/spring-boot-trabalhando-com-controllers) Veja nesse artigo como trabalhar com controllers em uma aplicação Spring Web MVC com Spring Boot. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/10/Como_instalar_e_utilizar_o_Bootstrap_via_npm-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 5 anos atrás ## [ Como instalar e utilizar o Bootstrap via npm ](https://www.treinaweb.com.br/blog/como-instalar-e-utilizar-o-bootstrap-via-npm) Instalar Bootstrap via npm e alterar suas variáveis, é mais simples do que imagina. Hoje iremos juntos fazer o download do Bootstrap 5. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/thymeleaf-reaproveitando-codigo-com-fragments-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 6 anos atrás ## [ Thymeleaf - Herança de Templates ](https://www.treinaweb.com.br/blog/thymeleaf-heranca-de-templates) Neste artigo veremos como implementar a herança de templates com os fragments parametrizados da template engine Thymeleaf. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **09h 26min 20s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58