{"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-anadir-efectos-hover-a-los-botones-en-tableberg","status":"publish","type":"docs","link":"https:\/\/tableberg.com\/es\/docs\/how-to-add-hover-effects-to-buttons-in-tableberg\/","title":{"rendered":"C\u00f3mo a\u00f1adir efectos Hover a los botones en Tableberg"},"content":{"rendered":"<p>Los botones de las tablas Tableberg son algo m\u00e1s que un elemento decorativo: gu\u00edan a los visitantes para que act\u00faen. Un efecto hover proporciona a los usuarios una respuesta visual inmediata, lo que hace que el bot\u00f3n parezca m\u00e1s interactivo. <\/p>\n\n\n\n<p>Esta gu\u00eda le mostrar\u00e1 c\u00f3mo a\u00f1adir un efecto hover a cualquier bot\u00f3n a\u00f1adido dentro de una celda 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\">Paso 1: Seleccionar el bot\u00f3n<\/h2>\n\n\n\n<p>En primer lugar, seleccione el bot\u00f3n de Tableberg al que desea aplicar efectos hover. A continuaci\u00f3n, vaya a la pesta\u00f1a Estilo de la barra lateral derecha. <\/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\">Paso 2: Elegir el texto y el color de fondo<\/h2>\n\n\n\n<p>Ahora seleccione el color para las opciones Hover Texto y Hover Fondo. <\/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>A continuaci\u00f3n, el avance 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\">Paso 3: Guardar la entrada o p\u00e1gina<\/h2>\n\n\n\n<p>Por \u00faltimo, despu\u00e9s de aplicar todas las personalizaciones, debe guardar o publicar la entrada para guardar todos los ajustes. <\/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\">Conclusi\u00f3n<\/h2>\n\n\n\n<p>Con s\u00f3lo unos pasos, puede convertir botones est\u00e1ticos en elementos interactivos de llamada a la acci\u00f3n utilizando Tableberg. A\u00f1adir un efecto hover no solo mejora el dise\u00f1o, sino que tambi\u00e9n aumenta la participaci\u00f3n del usuario.<\/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\/es\/author\/rajankur003\/"},"doc_category_info":[{"term_name":"Styling &amp; Customization","term_url":"https:\/\/tableberg.com\/es\/docs-category\/styling-customization\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/docs\/9714","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/comments?post=9714"}],"version-history":[{"count":2,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/docs\/9714\/revisions"}],"predecessor-version":[{"id":9722,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/docs\/9714\/revisions\/9722"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/media?parent=9714"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/doc_category?post=9714"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/doc_tag?post=9714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}