{"id":9714,"date":"2025-05-31T05:14:45","date_gmt":"2025-05-31T05:14:45","guid":{"rendered":"https:\/\/tableberg.com\/?post_type=docs&#038;p=9714"},"modified":"2025-05-31T05:14:47","modified_gmt":"2025-05-31T05:14:47","password":"","slug":"como-adicionar-efeitos-de-hover-a-botoes-no-tableberg","status":"publish","type":"docs","link":"https:\/\/tableberg.com\/pt\/docs\/how-to-add-hover-effects-to-buttons-in-tableberg\/","title":{"rendered":"Como adicionar efeitos de hover a bot\u00f5es no Tableberg"},"content":{"rendered":"<p>Os bot\u00f5es em suas tabelas Tableberg s\u00e3o mais do que apenas decorativos - eles orientam os visitantes a agir. Um efeito de foco fornece aos usu\u00e1rios um feedback visual imediato, fazendo com que o bot\u00e3o pare\u00e7a mais interativo. <\/p>\n\n\n\n<p>Este guia o orientar\u00e1 sobre como adicionar um efeito de foco a qualquer bot\u00e3o adicionado dentro de uma c\u00e9lula Tableberg.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Etapa 1: Selecione o bot\u00e3o<\/h2>\n\n\n\n<p>Primeiro, selecione o bot\u00e3o do Tableberg no qual voc\u00ea deseja aplicar os efeitos de foco. Em seguida, v\u00e1 para a guia Style (Estilo) na barra lateral direita. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"942\" height=\"782\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/2025-05-31_10-34-36.png\" alt=\"\" class=\"has-border-color has-main-accent-border-color wp-image-9717\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/2025-05-31_10-34-36.png 942w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/2025-05-31_10-34-36-300x249.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/2025-05-31_10-34-36-768x638.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/2025-05-31_10-34-36-14x12.png 14w\" sizes=\"auto, (max-width: 942px) 100vw, 942px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Etapa 2: Escolha o texto Hover e a cor de fundo<\/h2>\n\n\n\n<p>Agora, selecione a cor para as op\u00e7\u00f5es: Hover Text e Hover Background. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"944\" height=\"756\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/2025-05-31_11-04-23.gif\" alt=\"\" class=\"has-border-color has-main-accent-border-color wp-image-9718\" style=\"border-width:1px;border-radius:3px\"\/><\/figure>\n\n\n\n<p>Veja abaixo a pr\u00e9via final. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"630\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/2025-05-31_11-07-41.gif\" alt=\"\" class=\"has-border-color has-main-accent-border-color wp-image-9720\" style=\"border-width:1px;border-radius:3px\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Etapa 3: Salvar o post ou a p\u00e1gina<\/h2>\n\n\n\n<p>Por fim, depois de aplicar todas as personaliza\u00e7\u00f5es, voc\u00ea deve salvar ou publicar a postagem para salvar todas as configura\u00e7\u00f5es. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"940\" height=\"690\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/2025-05-31_11-10-25.png\" alt=\"\" class=\"has-border-color has-main-accent-border-color wp-image-9721\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/2025-05-31_11-10-25.png 940w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/2025-05-31_11-10-25-300x220.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/2025-05-31_11-10-25-768x564.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/2025-05-31_11-10-25-16x12.png 16w\" sizes=\"auto, (max-width: 940px) 100vw, 940px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Conclus\u00e3o<\/h2>\n\n\n\n<p>Com apenas algumas etapas, voc\u00ea pode transformar bot\u00f5es est\u00e1ticos em elementos interativos de chamada para a\u00e7\u00e3o usando o Tableberg. A adi\u00e7\u00e3o de um efeito de foco n\u00e3o apenas melhora o design, mas tamb\u00e9m aumenta o envolvimento do usu\u00e1rio.<\/p>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Buttons inside your Tableberg tables are more than just decorative\u2014they guide visitors to take action. A hover effect provides users with immediate visual feedback, making the button feel more interactive. This guide will walk you through how to add a hover effect to any button added inside a Tableberg cell. Step 1: Select the Button [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"doc_category":[127],"doc_tag":[],"class_list":["post-9714","docs","type-docs","status-publish","hentry","doc_category-styling-customization"],"year_month":"2026-04","word_count":158,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"Ankur Raj Bongshi","author_nicename":"rajankur003","author_url":"https:\/\/tableberg.com\/pt\/author\/rajankur003\/"},"doc_category_info":[{"term_name":"Styling &amp; Customization","term_url":"https:\/\/tableberg.com\/pt\/docs-category\/styling-customization\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/docs\/9714","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/comments?post=9714"}],"version-history":[{"count":2,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/docs\/9714\/revisions"}],"predecessor-version":[{"id":9722,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/docs\/9714\/revisions\/9722"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/media?parent=9714"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/doc_category?post=9714"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/doc_tag?post=9714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}