{"id":9133,"date":"2025-05-19T12:38:59","date_gmt":"2025-05-19T12:38:59","guid":{"rendered":"https:\/\/tableberg.com\/?post_type=docs&#038;p=9133"},"modified":"2025-05-19T12:38:59","modified_gmt":"2025-05-19T12:38:59","password":"","slug":"como-alterar-a-cor-do-botao-no-tableberg","status":"publish","type":"docs","link":"https:\/\/tableberg.com\/pt\/docs\/how-to-change-the-button-color-in-tableberg\/","title":{"rendered":"Como alterar a cor do bot\u00e3o no Tableberg"},"content":{"rendered":"<p>Os bot\u00f5es em uma tabela devem ser visualmente distintos e interativos. Uma cor de fundo bem escolhida garantir\u00e1 que eles chamem a aten\u00e7\u00e3o do usu\u00e1rio, enquanto um efeito de foco suave confirmar\u00e1 que eles s\u00e3o clic\u00e1veis. Sem isso, os bot\u00f5es correm o risco de parecerem fora do lugar ou, pior ainda, de passarem despercebidos.<\/p>\n\n\n\n<p>Neste guia, voc\u00ea aprender\u00e1 a personalizar as cores dos bot\u00f5es e os efeitos de foco diretamente no editor, para que suas tabelas permane\u00e7am limpas, funcionais e profissionais. <\/p>\n\n\n<div class=\"wp-block-ub-divider ub_divider ub-divider-orientation-horizontal\" id=\"ub_divider_de354889-d231-4233-b599-58df50161b16\"><div class=\"ub_divider_wrapper\" style=\"position: relative; margin-bottom: 2px; width: 30%; height: 2px; \" data-divider-alignment=\"center\"><div class=\"ub_divider_line\" style=\"border-top: 1px solid #ccc; margin-top: 2px; \"><\/div><\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>Etapa 1: Clique no bot\u00e3o dentro da tabela<\/strong><\/h2>\n\n\n\n<p>Localize o bot\u00e3o que voc\u00ea adicionou em uma c\u00e9lula da tabela. Clique diretamente no bot\u00e3o para selecionar o bloco Button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"423\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/1-1-1024x423.png\" alt=\"Clique no bot\u00e3o dentro da tabela\" class=\"wp-image-9136\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/1-1-1024x423.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/1-1-300x124.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/1-1-768x318.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/1-1-1536x635.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/1-1-18x7.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/1-1.png 1681w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n<div class=\"wp-block-ub-divider ub_divider ub-divider-orientation-horizontal\" id=\"ub_divider_1794c61d-002a-4b23-a861-be11f8859853\"><div class=\"ub_divider_wrapper\" style=\"position: relative; margin-bottom: 2px; width: 30%; height: 2px; \" data-divider-alignment=\"center\"><div class=\"ub_divider_line\" style=\"border-top: 1px solid #ccc; margin-top: 2px; \"><\/div><\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>Etapa 2: Abra a barra lateral de configura\u00e7\u00f5es de bloqueio<\/strong><\/h2>\n\n\n\n<p>Quando o bot\u00e3o estiver selecionado, olhe para a barra lateral direita. Se a barra lateral n\u00e3o estiver vis\u00edvel, clique no \u00edcone Configura\u00e7\u00f5es no canto superior direito do editor para abri-la. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"405\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/2-6-1024x405.png\" alt=\"Abra a barra lateral de configura\u00e7\u00f5es do bloco\" class=\"wp-image-9137\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/2-6-1024x405.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/2-6-300x119.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/2-6-768x304.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/2-6-1536x607.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/2-6-18x7.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/2-6.png 1842w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n<div class=\"wp-block-ub-divider ub_divider ub-divider-orientation-horizontal\" id=\"ub_divider_5dfe5a61-84e6-418e-b37f-7ddaf2caf6ff\"><div class=\"ub_divider_wrapper\" style=\"position: relative; margin-bottom: 2px; width: 30%; height: 2px; \" data-divider-alignment=\"center\"><div class=\"ub_divider_line\" style=\"border-top: 1px solid #ccc; margin-top: 2px; \"><\/div><\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>Etapa 3: Alterne para a guia Styles (Estilos)<\/strong><\/h2>\n\n\n\n<p>Na barra lateral, v\u00e1 at\u00e9 a guia Styles (Estilos). \u00c9 nela que est\u00e3o localizadas todas as configura\u00e7\u00f5es relacionadas \u00e0 apar\u00eancia do bloco Button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"417\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/3-4-1024x417.png\" alt=\"Alternar para a guia Styles (Estilos)\" class=\"wp-image-9138\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/3-4-1024x417.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/3-4-300x122.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/3-4-768x313.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/3-4-1536x626.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/3-4-18x7.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/3-4.png 1850w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n<div class=\"wp-block-ub-divider ub_divider ub-divider-orientation-horizontal\" id=\"ub_divider_4f2c6d2e-23cf-4f7e-a2c6-9c977724a01a\"><div class=\"ub_divider_wrapper\" style=\"position: relative; margin-bottom: 2px; width: 30%; height: 2px; \" data-divider-alignment=\"center\"><div class=\"ub_divider_line\" style=\"border-top: 1px solid #ccc; margin-top: 2px; \"><\/div><\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>Etapa 4: Escolha uma nova cor para o bot\u00e3o<\/strong><\/h2>\n\n\n\n<p>Role para baixo at\u00e9 encontrar a se\u00e7\u00e3o Color (Cor). Voc\u00ea ver\u00e1 op\u00e7\u00f5es para definir a cor do texto, a cor do texto em foco, a cor do plano de fundo e a cor do plano de fundo em foco para o bot\u00e3o.&nbsp;<\/p>\n\n\n\n<p>Clique na paleta de cores e escolha a cor que desejar ou insira um c\u00f3digo HEX\/RGB se quiser um controle preciso.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"353\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/05\/4-1.gif\" alt=\"Escolha uma nova cor para o bot\u00e3o\" class=\"wp-image-9140\" style=\"border-width:1px;border-radius:2px\"\/><\/figure>\n\n\n<div class=\"wp-block-ub-divider ub_divider ub-divider-orientation-horizontal\" id=\"ub_divider_f653a6de-4d7a-4b29-a562-f406c608d7a3\"><div class=\"ub_divider_wrapper\" style=\"position: relative; margin-bottom: 2px; width: 30%; height: 2px; \" data-divider-alignment=\"center\"><div class=\"ub_divider_line\" style=\"border-top: 1px solid #ccc; margin-top: 2px; \"><\/div><\/div><\/div>\n\n\n<p><strong>Conclus\u00e3o<\/strong><\/p>\n\n\n\n<p>Um bom design de bot\u00e3o em tabelas Tableberg se resume a dois elementos essenciais. Primeiro, a cor do bot\u00e3o deve contrastar claramente com o plano de fundo da tabela para que ele se destaque em um piscar de olhos. Em segundo lugar, um estado de foco definido oferece aos usu\u00e1rios um feedback instant\u00e2neo e confirma que o bot\u00e3o \u00e9 interativo.<\/p>\n\n\n\n<p>Agora que voc\u00ea sabe como definir ambos, seus bot\u00f5es ter\u00e3o a apar\u00eancia correta e se comportar\u00e3o da maneira que os usu\u00e1rios esperam.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p class=\"has-text-align-left\"><a href=\"https:\/\/tableberg.com\/pt\/como-criar-botoes-elegantes-no-wordpress\/\">Como criar bot\u00f5es elegantes no WordPress<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Buttons in a table should be visually distinct and interactive. A well-chosen background color will ensure they catch the user\u2019s eye, while a smooth hover effect will confirm they\u2019re clickable. Without these, buttons risk looking out of place or worse, going unnoticed. In this guide, you\u2019ll learn how to customize button colors and hover effects [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"doc_category":[127],"doc_tag":[],"class_list":["post-9133","docs","type-docs","status-publish","hentry","doc_category-styling-customization"],"year_month":"2026-04","word_count":290,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"Moinul Islam","author_nicename":"marufmoinul27","author_url":"https:\/\/tableberg.com\/pt\/author\/marufmoinul27\/"},"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\/9133","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\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/comments?post=9133"}],"version-history":[{"count":8,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/docs\/9133\/revisions"}],"predecessor-version":[{"id":9240,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/docs\/9133\/revisions\/9240"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/media?parent=9133"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/doc_category?post=9133"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/doc_tag?post=9133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}