{"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":"hoe-hover-effecten-toe-te-voegen-aan-knoppen-in-tableberg","status":"publish","type":"docs","link":"https:\/\/tableberg.com\/nl\/docs\/how-to-add-hover-effects-to-buttons-in-tableberg\/","title":{"rendered":"Hoe hover-effecten toevoegen aan knoppen in Tableberg"},"content":{"rendered":"<p>Knoppen in uw Tableberg tabellen zijn meer dan alleen decoratief - ze leiden bezoekers tot actie. Een hover-effect geeft gebruikers onmiddellijk visuele feedback, waardoor de knop interactiever aanvoelt. <\/p>\n\n\n\n<p>In deze handleiding lees je hoe je een hover-effect toevoegt aan elke knop die je toevoegt aan een Tableberg-cel.<\/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\">Stap 1: Selecteer de knop<\/h2>\n\n\n\n<p>Selecteer eerst de knop van Tableberg waarop je hover-effecten wilt toepassen. Ga vervolgens naar het tabblad Stijl in de rechter zijbalk. <\/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\">Stap 2: Hover-tekst en achtergrondkleur kiezen<\/h2>\n\n\n\n<p>Selecteer nu de kleur voor de opties: Hover Text en 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>Hieronder zie je de laatste preview. <\/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\">Stap 3: Sla het bericht of de pagina op<\/h2>\n\n\n\n<p>Ten slotte moet je na het toepassen van alle aanpassingen het bericht opslaan of publiceren om alle instellingen op te slaan. <\/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\">Conclusie<\/h2>\n\n\n\n<p>Met slechts een paar stappen kun je met Tableberg statische knoppen veranderen in interactieve call-to-action-elementen. Het toevoegen van een hover-effect verbetert niet alleen het ontwerp, maar verhoogt ook de betrokkenheid van de gebruiker.<\/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\/nl\/author\/rajankur003\/"},"doc_category_info":[{"term_name":"Styling &amp; Customization","term_url":"https:\/\/tableberg.com\/nl\/docs-category\/styling-customization\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/docs\/9714","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/comments?post=9714"}],"version-history":[{"count":2,"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/docs\/9714\/revisions"}],"predecessor-version":[{"id":9722,"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/docs\/9714\/revisions\/9722"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/media?parent=9714"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/doc_category?post=9714"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/tableberg.com\/nl\/wp-json\/wp\/v2\/doc_tag?post=9714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}