{"id":25163,"date":"2022-06-02T03:18:01","date_gmt":"2022-06-02T03:18:01","guid":{"rendered":"https:\/\/help.flipbuilder.com\/?post_type=docs&#038;p=25163"},"modified":"2026-07-15T03:56:16","modified_gmt":"2026-07-15T03:56:16","password":"","slug":"how-to-create-icon-buttons-with-click-and-hover-effects","status":"publish","type":"docs","link":"https:\/\/help.flipbuilder.com\/de\/docs\/how-to-create-icon-buttons-with-click-and-hover-effects\/","title":{"rendered":"So erstellen Sie Symbolschaltfl\u00e4chen mit Klick- und Hover-Effekten"},"content":{"rendered":"<p>Der Multimedia-Editor bietet viele gut gestaltete und vollst\u00e4ndig anpassbare Schaltfl\u00e4chen. Integrieren Sie eine davon in Ihr Flipbook, um eine benutzerfreundliche Erfahrung zu schaffen, bei der die Leser mit einem einfachen Klick m\u00fchelos auf die gew\u00fcnschte Seite oder Information zugreifen k\u00f6nnen.<\/p>\n<p><strong>Notiz:<\/strong> Der <strong>[Tasten]<\/strong> Die Symbolleiste ist nur f\u00fcr Benutzer von Flip PDF Corporate verf\u00fcgbar.<\/p>\n<h3>W\u00e4hlen Sie einen vorgefertigten Button<\/h3>\n<p>Dr\u00fccke den <strong>[Elemente]<\/strong> Symbolleiste in der Multimedia-Editor und w\u00e4hlen Sie <strong>[Schaltfl\u00e4chen \u2013 Mehr]<\/strong> um in die Schaltfl\u00e4chenliste zu gelangen.<\/p>\n<p>\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1000\" height=\"690\" src=\"https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-1.png\" alt=\"f\u00fcge einen Icon-Button hinzu-1\" srcset=\"https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-1.png 1000w, https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-1-300x207.png 300w, https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-1-768x530.png 768w, https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-1-18x12.png 18w, https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-1-360x248.png 360w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/p>\n<p>Scrollen Sie mit der Maus, um eine Schaltfl\u00e4che zu durchsuchen und auszuw\u00e4hlen. Sie k\u00f6nnen auch einige Schl\u00fcsselw\u00f6rter in das leere Feld eingeben, um nach der gew\u00fcnschten Schaltfl\u00e4che zu suchen. <\/p>\n<p>\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"1000\" height=\"673\" src=\"https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-2.png\" alt=\"\" srcset=\"https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-2.png 1000w, https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-2-300x202.png 300w, https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-2-768x517.png 768w, https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-2-18x12.png 18w, https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-2-360x242.png 360w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/p>\n<h3>Passen Sie den Schaltfl\u00e4chenstil an<\/h3>\n<p>Sie k\u00f6nnen das innere Symbol, die Gr\u00f6\u00dfe, die Position, den Text, die Farbe und weitere Einstellungen dieser Schaltfl\u00e4che weiter anpassen auf der <strong>[Einstellungen]<\/strong> Panel. Hier sind zwei Beispiele:<\/p>\n<p><strong>\u2022 Das innere Symbol bearbeiten<\/strong><br \/>Sie k\u00f6nnen das Schaltfl\u00e4chensymbol aus der Symbolbibliothek ersetzen und dessen Farbe, Gr\u00f6\u00dfe und Position festlegen. <\/p>\n<p>\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"827\" height=\"530\" src=\"https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-3.png\" alt=\"f\u00fcge einen Icon-Button hinzu-3\" srcset=\"https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-3.png 827w, https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-3-300x192.png 300w, https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-3-768x492.png 768w, https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-3-18x12.png 18w, https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-3-360x231.png 360w\" sizes=\"(max-width: 827px) 100vw, 827px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/p>\n<p><strong>\u2022 Passen Sie die Standard-\/Klick-\/Hover-Farbe an<\/strong><br \/>Sie k\u00f6nnen die Standard-\/Klick-\/Hover-Farbe der Schaltfl\u00e4che \u00e4ndern. <\/p>\n<p>\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"804\" src=\"https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-4.gif\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/p>\n<h3>F\u00fcgen Sie der Schaltfl\u00e4che eine Aktion hinzu<\/h3>\n<p>Sie k\u00f6nnen der Schaltfl\u00e4che entsprechende Ausl\u00f6seaktionen hinzuf\u00fcgen.<\/p>\n<p>Nehmen <strong>[Pop-up-Fenster]<\/strong> als Beispiel:<\/p>\n<p>1. W\u00e4hlen Sie die Schaltfl\u00e4che und klicken Sie <strong>[Aktionen]<\/strong><br \/>2. W\u00e4hlen Sie <strong>[Ausl\u00f6sen bei Klicken\/Mouseover\/Mouseleave]<\/strong> als Trigger-Zeitpunkt<br \/>3. W\u00e4hlen Sie<strong> [Pop-up-Fenster]<\/strong><br \/>4. F\u00fcgen Sie die URL ein, die die Leser \u00f6ffnen sollen, und bearbeiten Sie den Titel<br \/>5. Klicken Sie auf <strong>[Speichern]<\/strong><\/p>\n<p>\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"689\" src=\"https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-5.png\" alt=\"f\u00fcge einen Icon-Button hinzu-5\" srcset=\"https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-5.png 1000w, https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-5-300x207.png 300w, https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-5-768x529.png 768w, https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-5-18x12.png 18w, https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-5-360x248.png 360w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>","protected":false},"excerpt":{"rendered":"<p>Der Multimedia-Editor bietet viele gut gestaltete und vollst\u00e4ndig anpassbare Schaltfl\u00e4chen. Integrieren Sie eine davon in Ihr Flipbook, um eine benutzerfreundliche Erfahrung zu schaffen, die es den Lesern erm\u00f6glicht, mit einem einfachen Klick m\u00fchelos auf die gew\u00fcnschte Seite oder Information zuzugreifen. Hinweis: Die Symbolleiste [Schaltfl\u00e4chen] ist nur f\u00fcr Benutzer von Flip PDF Corporate verf\u00fcgbar. W\u00e4hlen Sie eine vorgefertigte Schaltfl\u00e4che aus. Klicken Sie auf die Symbolleiste [Elemente] in [\u2026]<\/p>","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[10],"doc_tag":[],"year_month":"2026-07","word_count":215,"total_views":"94528","reactions":{"happy":"6","normal":"1","sad":"2"},"author_info":{"author_nicename":"yuki","author_url":"https:\/\/help.flipbuilder.com\/de\/author\/yuki\/"},"doc_category_info":[{"term_name":"Multimedia Editor","term_url":"https:\/\/help.flipbuilder.com\/de\/docs-category\/multimedia-editor\/"}],"doc_tag_info":[],"author_list":[{"ID":"6","user_login":"Andy","display_name":"Andy","id":"6"},{"ID":"13","user_login":"helpfber","display_name":"help fber","id":"13"},{"ID":"9","user_login":"Jacky","display_name":"Jacky","id":"9"},{"ID":"4","user_login":"Jasmin","display_name":"Jasmin","id":"4"},{"ID":"18","user_login":"Joe","display_name":"Joe Wang","id":"18"},{"ID":"10","user_login":"Lynn","display_name":"Lynn","id":"10"},{"ID":"11","user_login":"manxia","display_name":"manxia","id":"11"},{"ID":"8","user_login":"Shero","display_name":"Shero","id":"8"},{"ID":"3","user_login":"Taby","display_name":"Taby","id":"3"},{"ID":"15","user_login":"WP Dev","display_name":"WP Dev","id":"15"},{"ID":"14","user_login":"yihuang","display_name":"yihuang","id":"14"},{"ID":"5","user_login":"yokiahoke","display_name":"yokiahoke","id":"5"},{"ID":"2","user_login":"Yuki","display_name":"Yuki","id":"2"},{"ID":"17","user_login":"Yvette","display_name":"Yvette","id":"17"},{"ID":"16","user_login":"ZhuSiYing","display_name":"ZhuSiYing","id":"16"}],"knowledge_base_info":[],"knowledge_base_slug":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to create icon buttons with click and hover effects - FlipBuilder Help Center<\/title>\n<meta name=\"description\" content=\"Using the powerful multimedia editor in Flip PDF Plus Corp to quickly apply button template, custom button style, and add trigger actions.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/help.flipbuilder.com\/de\/docs\/how-to-create-icon-buttons-with-click-and-hover-effects\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create icon buttons with click and hover effects - FlipBuilder Help Center\" \/>\n<meta property=\"og:description\" content=\"Using the powerful multimedia editor in Flip PDF Plus Corp to quickly apply button template, custom button style, and add trigger actions.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/help.flipbuilder.com\/de\/docs\/how-to-create-icon-buttons-with-click-and-hover-effects\/\" \/>\n<meta property=\"og:site_name\" content=\"FlipBuilder Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-15T03:56:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-1.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"2\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/help.flipbuilder.com\/jp\/docs\/how-to-create-icon-buttons-with-click-and-hover-effects\/\",\"url\":\"https:\/\/help.flipbuilder.com\/jp\/docs\/how-to-create-icon-buttons-with-click-and-hover-effects\/\",\"name\":\"How to create icon buttons with click and hover effects - FlipBuilder Help Center\",\"isPartOf\":{\"@id\":\"https:\/\/help.flipbuilder.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/help.flipbuilder.com\/jp\/docs\/how-to-create-icon-buttons-with-click-and-hover-effects\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/help.flipbuilder.com\/jp\/docs\/how-to-create-icon-buttons-with-click-and-hover-effects\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-1.png\",\"datePublished\":\"2022-06-02T03:18:01+00:00\",\"dateModified\":\"2026-07-15T03:56:16+00:00\",\"description\":\"Using the powerful multimedia editor in Flip PDF Plus Corp to quickly apply button template, custom button style, and add trigger actions.\",\"breadcrumb\":{\"@id\":\"https:\/\/help.flipbuilder.com\/jp\/docs\/how-to-create-icon-buttons-with-click-and-hover-effects\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/help.flipbuilder.com\/jp\/docs\/how-to-create-icon-buttons-with-click-and-hover-effects\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/help.flipbuilder.com\/jp\/docs\/how-to-create-icon-buttons-with-click-and-hover-effects\/#primaryimage\",\"url\":\"https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-1.png\",\"contentUrl\":\"https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-1.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/help.flipbuilder.com\/jp\/docs\/how-to-create-icon-buttons-with-click-and-hover-effects\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/help.flipbuilder.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create icon buttons with click and hover effects\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/help.flipbuilder.com\/#website\",\"url\":\"https:\/\/help.flipbuilder.com\/\",\"name\":\"FlipBuilder Help Center\",\"description\":\"Flip Book Software\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/help.flipbuilder.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create icon buttons with click and hover effects - FlipBuilder Help Center","description":"Using the powerful multimedia editor in Flip PDF Plus Corp to quickly apply button template, custom button style, and add trigger actions.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/help.flipbuilder.com\/de\/docs\/how-to-create-icon-buttons-with-click-and-hover-effects\/","og_locale":"de_DE","og_type":"article","og_title":"How to create icon buttons with click and hover effects - FlipBuilder Help Center","og_description":"Using the powerful multimedia editor in Flip PDF Plus Corp to quickly apply button template, custom button style, and add trigger actions.","og_url":"https:\/\/help.flipbuilder.com\/de\/docs\/how-to-create-icon-buttons-with-click-and-hover-effects\/","og_site_name":"FlipBuilder Help Center","article_modified_time":"2026-07-15T03:56:16+00:00","og_image":[{"url":"https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-1.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"2\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/help.flipbuilder.com\/jp\/docs\/how-to-create-icon-buttons-with-click-and-hover-effects\/","url":"https:\/\/help.flipbuilder.com\/jp\/docs\/how-to-create-icon-buttons-with-click-and-hover-effects\/","name":"How to create icon buttons with click and hover effects - FlipBuilder Help Center","isPartOf":{"@id":"https:\/\/help.flipbuilder.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/help.flipbuilder.com\/jp\/docs\/how-to-create-icon-buttons-with-click-and-hover-effects\/#primaryimage"},"image":{"@id":"https:\/\/help.flipbuilder.com\/jp\/docs\/how-to-create-icon-buttons-with-click-and-hover-effects\/#primaryimage"},"thumbnailUrl":"https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-1.png","datePublished":"2022-06-02T03:18:01+00:00","dateModified":"2026-07-15T03:56:16+00:00","description":"Using the powerful multimedia editor in Flip PDF Plus Corp to quickly apply button template, custom button style, and add trigger actions.","breadcrumb":{"@id":"https:\/\/help.flipbuilder.com\/jp\/docs\/how-to-create-icon-buttons-with-click-and-hover-effects\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/help.flipbuilder.com\/jp\/docs\/how-to-create-icon-buttons-with-click-and-hover-effects\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/help.flipbuilder.com\/jp\/docs\/how-to-create-icon-buttons-with-click-and-hover-effects\/#primaryimage","url":"https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-1.png","contentUrl":"https:\/\/help.flipbuilder.com\/wp-content\/uploads\/2022\/06\/add-a-icon-button-1.png"},{"@type":"BreadcrumbList","@id":"https:\/\/help.flipbuilder.com\/jp\/docs\/how-to-create-icon-buttons-with-click-and-hover-effects\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/help.flipbuilder.com\/"},{"@type":"ListItem","position":2,"name":"How to create icon buttons with click and hover effects"}]},{"@type":"WebSite","@id":"https:\/\/help.flipbuilder.com\/#website","url":"https:\/\/help.flipbuilder.com\/","name":"FlipBuilder Help Center","description":"Flip Book Software","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/help.flipbuilder.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de"}]}},"_links":{"self":[{"href":"https:\/\/help.flipbuilder.com\/de\/wp-json\/wp\/v2\/docs\/25163"}],"collection":[{"href":"https:\/\/help.flipbuilder.com\/de\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/help.flipbuilder.com\/de\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/help.flipbuilder.com\/de\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/help.flipbuilder.com\/de\/wp-json\/wp\/v2\/comments?post=25163"}],"version-history":[{"count":51,"href":"https:\/\/help.flipbuilder.com\/de\/wp-json\/wp\/v2\/docs\/25163\/revisions"}],"predecessor-version":[{"id":25800,"href":"https:\/\/help.flipbuilder.com\/de\/wp-json\/wp\/v2\/docs\/25163\/revisions\/25800"}],"wp:attachment":[{"href":"https:\/\/help.flipbuilder.com\/de\/wp-json\/wp\/v2\/media?parent=25163"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/help.flipbuilder.com\/de\/wp-json\/wp\/v2\/doc_category?post=25163"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/help.flipbuilder.com\/de\/wp-json\/wp\/v2\/doc_tag?post=25163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}