{"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":"wie-man-hover-effekte-zu-schaltflachen-in-tableberg-hinzufugt","status":"publish","type":"docs","link":"https:\/\/tableberg.com\/de\/docs\/how-to-add-hover-effects-to-buttons-in-tableberg\/","title":{"rendered":"Hinzuf\u00fcgen von Hover-Effekten zu Schaltfl\u00e4chen in Tableberg"},"content":{"rendered":"<p>Schaltfl\u00e4chen in Ihren Tableberg-Tabellen sind mehr als nur dekorativ - sie leiten Besucher zum Handeln an. Ein Hover-Effekt gibt den Nutzern ein unmittelbares visuelles Feedback, wodurch die Schaltfl\u00e4che interaktiver wirkt. <\/p>\n\n\n\n<p>In dieser Anleitung erfahren Sie, wie Sie einen Hover-Effekt zu einer beliebigen Schaltfl\u00e4che innerhalb einer Tableberg-Zelle hinzuf\u00fcgen k\u00f6nnen.<\/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\">Schritt 1: W\u00e4hlen Sie die Schaltfl\u00e4che<\/h2>\n\n\n\n<p>W\u00e4hlen Sie zun\u00e4chst die Schaltfl\u00e4che von Tableberg aus, auf die Sie Hover-Effekte anwenden m\u00f6chten. Gehen Sie dann auf die Registerkarte Stil in der rechten Seitenleiste. <\/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\">Schritt 2: W\u00e4hlen Sie Hover-Text und Hintergrundfarbe<\/h2>\n\n\n\n<p>W\u00e4hlen Sie nun die Farbe f\u00fcr die Optionen: Hover-Text und Hover-Hintergrund. <\/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>Nachstehend finden Sie die endg\u00fcltige Vorschau. <\/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\">Schritt 3: Speichern Sie den Beitrag oder die Seite<\/h2>\n\n\n\n<p>Nachdem Sie alle Anpassungen vorgenommen haben, m\u00fcssen Sie den Beitrag speichern oder ver\u00f6ffentlichen, um alle Einstellungen zu speichern. <\/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\">Schlussfolgerung<\/h2>\n\n\n\n<p>Mit nur wenigen Schritten k\u00f6nnen Sie mit Tableberg statische Schaltfl\u00e4chen in interaktive Call-to-Action-Elemente verwandeln. Das Hinzuf\u00fcgen eines Hover-Effekts verbessert nicht nur das Design, sondern steigert auch die Benutzeraktivit\u00e4t.<\/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\/de\/author\/rajankur003\/"},"doc_category_info":[{"term_name":"Styling &amp; Customization","term_url":"https:\/\/tableberg.com\/de\/docs-category\/styling-customization\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/docs\/9714","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/comments?post=9714"}],"version-history":[{"count":2,"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/docs\/9714\/revisions"}],"predecessor-version":[{"id":9722,"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/docs\/9714\/revisions\/9722"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/media?parent=9714"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/doc_category?post=9714"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/doc_tag?post=9714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}