{"id":24946,"date":"2025-12-19T19:44:38","date_gmt":"2025-12-19T18:44:38","guid":{"rendered":"https:\/\/library.cancom.de\/master\/?page_id=24946"},"modified":"2026-07-21T14:26:48","modified_gmt":"2026-07-21T12:26:48","slug":"cta-komponente","status":"publish","type":"page","link":"https:\/\/library.cancom.de\/master\/cta-komponente\/","title":{"rendered":"\u00dcbersicht: CTA Komponente"},"content":{"rendered":"\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-d480d8c5 wp-block-group-is-layout-constrained\" style=\"padding-bottom:var(--wp--preset--spacing--medium)\">\n<h1 class=\"wp-block-heading\">\u00dcbersicht: Links, Buttons und CTA Sections<\/h1>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-2038a1c9 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"margin-top:var(--wp--preset--spacing--small);margin-bottom:var(--wp--preset--spacing--small);padding-right:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--medium)\">\n<h4 class=\"wp-block-heading\">Kontextlogik<\/h4>\n\n\n\n<div class=\"wp-block-group has-global-padding is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-0577d16c wp-block-group-is-layout-constrained\">\n<p class=\"wp-container-content-ffc8cefc wp-block-paragraph\">Das CTA-Design basiert auf einer klaren <strong>Handlungs- und Priorit\u00e4tslogik<\/strong>. Ziel ist es, Nutzer gezielt zu f\u00fchren und auf den ersten Blick verst\u00e4ndlich zu machen: Was ist die wichtigste Handlung auf dieser Seite? Welche Aktionen sind erg\u00e4nzend oder optional?<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group grid-max-3 has-background is-layout-grid wp-container-core-group-is-layout-08b8583d wp-block-group-is-layout-grid\" style=\"background-color:#f2f3f7c7\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-ea2b56ee wp-block-group-is-layout-flex\" style=\"padding-top:var(--wp--preset--spacing--tiny);padding-right:var(--wp--preset--spacing--tiny);padding-bottom:var(--wp--preset--spacing--tiny);padding-left:var(--wp--preset--spacing--tiny)\">\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-9dfa3af7 wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\" style=\"text-transform:uppercase\">Primary  \u2192  Conversion Button<\/p>\n\n\n\n<div class=\"wp-block-group pa-cta-core is-content-justification-left is-nowrap is-layout-flex wp-container-core-group-is-layout-eec7b59a wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div style=\"gap: var(--wp--preset--spacing--small); \" class=\"wp-block-greyd-buttons\">\n<a  class=\"button is-style-sec gs_YZ9Ypc \">Primary<\/a><style class=\"greyd-styles\">.gs_YZ9Ypc { color: var(--wp--preset--color--background) !important; border-top: 2px solid var(--wp--preset--color--tertiary) !important; border-right: 2px solid var(--wp--preset--color--tertiary) !important; border-bottom: 2px solid var(--wp--preset--color--tertiary) !important; border-left: 2px solid var(--wp--preset--color--tertiary) !important; background: var(--wp--preset--color--tertiary) !important; } .gs_YZ9Ypc:hover { color: var(--wp--preset--color--background) !important; background: var(--wp--preset--color--darkest) !important; border-top: 2px solid var(--wp--preset--color--darkest) !important; border-right: 2px solid var(--wp--preset--color--darkest) !important; border-bottom: 2px solid var(--wp--preset--color--darkest) !important; border-left: 2px solid var(--wp--preset--color--darkest) !important; } <\/style>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Filled Button | <strong>High&nbsp;Intent<\/strong>&nbsp;<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Einsatz:<\/strong> F\u00fcr <strong>die wichtigste Aktion<\/strong> auf einer Seite oder in einem Abschnitt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Gestaltungsprinzipien:<\/strong><br><strong>Maximal 1\u20132 pro Seite<\/strong> \u2192 Fokus bleibt klar<br><strong>Gef\u00fcllt<\/strong> \u2192 hohe visuelle Pr\u00e4senz<br><strong>Gr\u00f6\u00dfer<\/strong> \u2192 klare Hierarchie gegen\u00fcber Secondary<br><strong>Starker Kontrast<\/strong> \u2192 sofort erkennbar<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Typische Use-Cases:<\/strong> \u201eDemo anfordern\u201c, \u201eFAQ\u201c, \u201eJetzt Kontakt aufnehmen\u201c im Hero-Bereiche<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-ea2b56ee wp-block-group-is-layout-flex\" style=\"padding-top:var(--wp--preset--spacing--tiny);padding-right:var(--wp--preset--spacing--tiny);padding-bottom:var(--wp--preset--spacing--tiny);padding-left:var(--wp--preset--spacing--tiny)\">\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-9dfa3af7 wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\" style=\"text-transform:uppercase\">secondary<\/p>\n\n\n\n<div class=\"wp-block-group pa-cta-core_actions is-layout-flow wp-container-core-group-is-layout-2c90a543 wp-block-group-is-layout-flow\">\n<div style=\"gap: var(--wp--preset--spacing--tiny); \" class=\"wp-block-greyd-buttons\"><a  class=\"button dyn is-style-sec gs_8F4bmL is-size-small\">Secondary<\/a><style class=\"greyd-styles\">.gs_8F4bmL { border-top: 2px solid var(--wp--preset--color--tertiary) !important; border-right: 2px solid var(--wp--preset--color--tertiary) !important; border-bottom: 2px solid var(--wp--preset--color--tertiary) !important; border-left: 2px solid var(--wp--preset--color--tertiary) !important; color: var(--wp--preset--color--tertiary) !important; background: var(--wp--preset--color--transparent) !important; padding-right: 20px !important; padding-left: 20px !important; } .gs_8F4bmL:hover { border-top: 2px solid var(--wp--preset--color--tertiary) !important; border-right: 2px solid var(--wp--preset--color--tertiary) !important; border-bottom: 2px solid var(--wp--preset--color--tertiary) !important; border-left: 2px solid var(--wp--preset--color--tertiary) !important; color: var(--wp--preset--color--background) !important; background: var(--wp--preset--color--tertiary) !important; } <\/style>\n\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Outline Button | <strong>Mid&nbsp;Intent<\/strong>&nbsp;<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Einsatz:<\/strong> F\u00fcr <strong>zweitrangige, unterst\u00fctzende Aktionen<\/strong>, die wichtig sind, aber nicht die Haupt-Conversion.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Gestaltungsprinzipien:<\/strong><br><strong>Outline <\/strong> \u2192 bewusst weniger dominant<br><strong>Gleiche Gr\u00f6\u00dfe untereinander<\/strong> \u2192 Gleichrangigkeit<br><strong>Mehrere nebeneinander m\u00f6glich<\/strong> \u2192 Vergleich &amp; Auswahl erlaubt<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Typische Use-Cases:<\/strong> \u201eReferenz ansehen\u201c, \u201eZum Shop\u201c<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-ea2b56ee wp-block-group-is-layout-flex\" style=\"padding-top:var(--wp--preset--spacing--tiny);padding-right:var(--wp--preset--spacing--tiny);padding-bottom:var(--wp--preset--spacing--tiny);padding-left:var(--wp--preset--spacing--tiny)\">\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-9dfa3af7 wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\" style=\"text-transform:uppercase\">Tertiary<\/p>\n\n\n\n<div class=\"wp-block-group pa-cta-core_actions is-layout-flow wp-container-core-group-is-layout-2c90a543 wp-block-group-is-layout-flow\">\n<div style=\"gap: var(--wp--preset--spacing--tiny); \" class=\"wp-block-greyd-buttons\">\n\n\n<a  class=\"button is-style-clear dyn gs_e4OsDY \"><span style=\"flex:1\">Tertiary Link<\/span><span class=\"arrow_right\" style=\"vertical-align:middle;font-size:100%;margin-left:10px\" aria-hidden=\"true\"><\/span><\/a><style class=\"greyd-styles\">.gs_e4OsDY { padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; color: var(--wp--preset--color--tertiary) !important; } .gs_e4OsDY:hover { color: var(--wp--preset--color--darkest) !important; } <\/style>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Text- Links | <strong>Low&nbsp;Intent<\/strong>&nbsp;<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Einsatz:<\/strong> F\u00fcr<strong> nicht dominante Aktionen<\/strong>, die Orientierung geben, aber keine direkte Conversion ausl\u00f6sen sollen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Gestaltungsprinzipien:<\/strong><br><strong>Keine Button-Form<\/strong> \u2192 bewusst zur\u00fcckhaltend<br><strong>Inline oder listenbasiert<\/strong> \u2192 integriert in den Content<br><strong>Geringe visuelle Priorit\u00e4t<\/strong> \u2192 untergeordnet zu Primary &amp; Secondary<br><strong>Mehrfach pro Seite erlaubt<\/strong> \u2192 auch in gr\u00f6\u00dferen Mengen nutzbar<br><strong>Klar als Link erkennbar<\/strong> (Farbe, Pfeil, Hover-State)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Typische Use-Cases:<\/strong> Links im Flie\u00dftext, \u201eMehr erfahren\u201c, \u201eWeitere Produkte ansehen\u201c, \u201eZur \u00dcbersicht\u201c, \u201eDetails anzeigen\u201c<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-090e7e3a wp-block-group-is-layout-constrained\" style=\"margin-top:0;padding-top:var(--wp--preset--spacing--medium);padding-right:0;padding-bottom:var(--wp--preset--spacing--medium);padding-left:0\">\n<div class=\"wp-block-group has-global-padding is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-5a4064f1 wp-block-group-is-layout-constrained\" style=\"margin-top:var(--wp--preset--spacing--small);margin-bottom:var(--wp--preset--spacing--small);padding-right:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--medium)\">\n<h4 class=\"wp-block-heading\">Farbkontrast<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Die verwendeten Farbkontraste entsprechen den WCAG-Vorgaben und wurden auf ihre Barrierefreiheit gepr\u00fcft. So ist eine gute Lesbarkeit und Zug\u00e4nglichkeit der Inhalte gew\u00e4hrleistet.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull grid-max-3 is-layout-grid wp-container-core-group-is-layout-08b8583d wp-block-group-is-layout-grid gs_anBoPE group_wrap\">\n<div class=\"wp-block-group has-base-background-color has-background is-vertical is-layout-flex wp-container-core-group-is-layout-c4cf3051 wp-block-group-is-layout-flex\">\n<p class=\"wp-block-paragraph\">*<strong>5.87<\/strong><\/p>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-f15824f9 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-77746977 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-c4cf3051 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-greyd-buttons\">\n<a  href=\"#\" class=\"button  gs_qxa40c \">Primary<\/a><style class=\"greyd-styles\">.gs_qxa40c { color: var(--wp--preset--color--background) !important; background: var(--wp--preset--color--tertiary) !important; border-top: 2px solid var(--wp--preset--color--tertiary) !important; border-right: 2px solid var(--wp--preset--color--tertiary) !important; border-bottom: 2px solid var(--wp--preset--color--tertiary) !important; border-left: 2px solid var(--wp--preset--color--tertiary) !important; } .gs_qxa40c:hover { color: var(--wp--preset--color--background) !important; background: var(--wp--preset--color--darkest) !important; border-top: 2px solid var(--wp--preset--color--darkest) !important; border-right: 2px solid var(--wp--preset--color--darkest) !important; border-bottom: 2px solid var(--wp--preset--color--darkest) !important; border-left: 2px solid var(--wp--preset--color--darkest) !important; } <\/style>\n<\/div>\n\n\n\n<div class=\"wp-block-group pa-cta-core_actions is-layout-flow wp-container-core-group-is-layout-2c90a543 wp-block-group-is-layout-flow\">\n<div style=\"gap: var(--wp--preset--spacing--tiny); margin-top:0;margin-bottom:0\" class=\"wp-block-greyd-buttons\">\n<a  class=\"button is-style-sec gs_wEURUm is-size-small\">Secondary <\/a><style class=\"greyd-styles\">.gs_wEURUm { border-top: 2px solid var(--wp--preset--color--tertiary) !important; border-right: 2px solid var(--wp--preset--color--tertiary) !important; border-bottom: 2px solid var(--wp--preset--color--tertiary) !important; border-left: 2px solid var(--wp--preset--color--tertiary) !important; color: var(--wp--preset--color--tertiary) !important; background: var(--wp--preset--color--transparent) !important; padding-right: 20px !important; padding-left: 20px !important; } .gs_wEURUm:hover { border-top: 2px solid var(--wp--preset--color--tertiary) !important; border-right: 2px solid var(--wp--preset--color--tertiary) !important; border-bottom: 2px solid var(--wp--preset--color--tertiary) !important; border-left: 2px solid var(--wp--preset--color--tertiary) !important; color: var(--wp--preset--color--background) !important; background: var(--wp--preset--color--tertiary) !important; } <\/style>\n\n\n\n<a  class=\"button is-style-clear gs_OWwVYH \"><span style=\"flex:1\">Tertiary Link<\/span><span class=\"arrow_right\" style=\"vertical-align:middle;font-size:100%;margin-left:10px\" aria-hidden=\"true\"><\/span><\/a><style class=\"greyd-styles\">.gs_OWwVYH { padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; color: var(--wp--preset--color--tertiary) !important; } .gs_OWwVYH:hover { color: var(--wp--preset--color--darkest) !important; } <\/style>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-c4cf3051 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-greyd-buttons\">\n<a role=\"button\" tabindex=\"0\" onclick=\"greyd.trigger.trigger(event, &quot;show_button&quot;, false);\" class=\"button  gs_slipf6 is-size-big\"  data-anim-action=\"custom\" data-anim-event=\"hover\" data-anim-triggered=\"false\" data-anim-from=\"transform: scale(1);\n\" data-anim-to=\"transform: scale(1.1);\n\" data-anim-id=\"anim-6a8930313ee7e\"><span class=\"arrow_right\" style=\"vertical-align:middle;font-size:100%;margin-right:0px\" aria-hidden=\"true\"><\/span><span style=\"flex:1\"><\/span><\/a><style class=\"greyd-styles\">.gs_slipf6 { color: var(--wp--preset--color--background) !important; padding-top: 1rem !important; padding-right: 1rem !important; padding-bottom: 1rem !important; padding-left: 1rem !important; background: var(--wp--preset--color--tertiary) !important; border-top: 2px solid var(--wp--preset--color--tertiary) !important; border-right: 2px solid var(--wp--preset--color--tertiary) !important; border-bottom: 2px solid var(--wp--preset--color--tertiary) !important; border-left: 2px solid var(--wp--preset--color--tertiary) !important; } .gs_slipf6:hover { color: var(--wp--preset--color--background) !important; background: var(--wp--preset--color--darkest) !important; border-top: 2px solid var(--wp--preset--color--darkest) !important; border-right: 2px solid var(--wp--preset--color--darkest) !important; border-bottom: 2px solid var(--wp--preset--color--darkest) !important; border-left: 2px solid var(--wp--preset--color--darkest) !important; } <\/style>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-77746977 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-c4cf3051 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-greyd-buttons\">\n<a  href=\"#\" class=\"button  gs_AMs8KQ \">Primary<\/a><style class=\"greyd-styles\">.gs_AMs8KQ { color: var(--wp--preset--color--background) !important; background: var(--wp--preset--color--primary) !important; border-top: 2px solid var(--wp--preset--color--primary) !important; border-right: 2px solid var(--wp--preset--color--primary) !important; border-bottom: 2px solid var(--wp--preset--color--primary) !important; border-left: 2px solid var(--wp--preset--color--primary) !important; } .gs_AMs8KQ:hover { color: var(--wp--preset--color--background) !important; background: var(--wp--preset--color--darkest) !important; border-top: 2px solid var(--wp--preset--color--darkest) !important; border-right: 2px solid var(--wp--preset--color--darkest) !important; border-bottom: 2px solid var(--wp--preset--color--darkest) !important; border-left: 2px solid var(--wp--preset--color--darkest) !important; } <\/style>\n<\/div>\n\n\n\n<div class=\"wp-block-group pa-cta-core_actions is-layout-flow wp-container-core-group-is-layout-2c90a543 wp-block-group-is-layout-flow\">\n<div style=\"gap: var(--wp--preset--spacing--tiny); \" class=\"wp-block-greyd-buttons\">\n<a  class=\"button is-style-sec gs_rwULcF is-size-small\">Secondary red<\/a><style class=\"greyd-styles\">.gs_rwULcF { border-top: 2px solid var(--wp--preset--color--primary) !important; border-right: 2px solid var(--wp--preset--color--primary) !important; border-bottom: 2px solid var(--wp--preset--color--primary) !important; border-left: 2px solid var(--wp--preset--color--primary) !important; color: var(--wp--preset--color--primary) !important; background: var(--wp--preset--color--transparent) !important; padding-right: 20px !important; padding-left: 20px !important; } .gs_rwULcF:hover { border-top: 2px solid var(--wp--preset--color--primary) !important; border-right: 2px solid var(--wp--preset--color--primary) !important; border-bottom: 2px solid var(--wp--preset--color--primary) !important; border-left: 2px solid var(--wp--preset--color--primary) !important; color: var(--wp--preset--color--background) !important; background: var(--wp--preset--color--primary) !important; } <\/style>\n\n\n\n<a  class=\"button is-style-clear gs_aWYHIF \"><span style=\"flex:1\">Tertiary Link<\/span><span class=\"arrow_right\" style=\"vertical-align:middle;font-size:100%;margin-left:10px\" aria-hidden=\"true\"><\/span><\/a><style class=\"greyd-styles\">.gs_aWYHIF { padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; color: var(--wp--preset--color--primary) !important; } .gs_aWYHIF:hover { color: var(--wp--preset--color--darkest) !important; } <\/style>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-c4cf3051 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-greyd-buttons\">\n<a role=\"button\" tabindex=\"0\" onclick=\"greyd.trigger.trigger(event, &quot;show_button&quot;, false);\" class=\"button is-style-sec gs_bLST0R is-size-big\"  data-anim-action=\"custom\" data-anim-event=\"hover\" data-anim-triggered=\"false\" data-anim-from=\"transform: scale(1);\n\" data-anim-to=\"transform: scale(1.1);\n\" data-anim-id=\"anim-6a8930313facc\"><span class=\"arrow_right\" style=\"vertical-align:middle;font-size:100%;margin-right:0px\" aria-hidden=\"true\"><\/span><span style=\"flex:1\"><\/span><\/a><style class=\"greyd-styles\">.gs_bLST0R { color: var(--wp--preset--color--background) !important; padding-top: 1rem !important; padding-right: 1rem !important; padding-bottom: 1rem !important; padding-left: 1rem !important; background: var(--wp--preset--color--primary) !important; border-top: 2px solid var(--wp--preset--color--primary) !important; border-right: 2px solid var(--wp--preset--color--primary) !important; border-bottom: 2px solid var(--wp--preset--color--primary) !important; border-left: 2px solid var(--wp--preset--color--primary) !important; } .gs_bLST0R:hover { color: var(--wp--preset--color--background) !important; background: var(--wp--preset--color--darkest) !important; border-top: 2px solid var(--wp--preset--color--foreground) !important; border-right: 2px solid var(--wp--preset--color--foreground) !important; border-bottom: 2px solid var(--wp--preset--color--foreground) !important; border-left: 2px solid var(--wp--preset--color--foreground) !important; } <\/style>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Textlink &#8211; <a href=\"#\">Lorem ipsum dolor sit amet, consetetur sadipscing.<\/a><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-dark-background-color has-background is-vertical is-layout-flex wp-container-core-group-is-layout-c4cf3051 wp-block-group-is-layout-flex\">\n<p class=\"has-background-color has-text-color has-link-color wp-elements-58ccc8ba308093757eb03a1d3bbc29ba wp-block-paragraph\">*<strong>10.53<\/strong><\/p>\n\n\n\n<div class=\"wp-block-greyd-buttons\">\n<a  href=\"#\" class=\"button  gs_ntS1l3 \">Primary<\/a><style class=\"greyd-styles\">.gs_ntS1l3 { color: var(--wp--preset--color--darkest) !important; background: #89baff !important; border-top: 2px solid #89baff !important; border-right: 2px solid #89baff !important; border-bottom: 2px solid #89baff !important; border-left: 2px solid #89baff !important; } .gs_ntS1l3:hover { color: var(--wp--preset--color--darkest) !important; background: var(--wp--preset--color--background) !important; border-top: 2px solid var(--wp--preset--color--background) !important; border-right: 2px solid var(--wp--preset--color--background) !important; border-bottom: 2px solid var(--wp--preset--color--background) !important; border-left: 2px solid var(--wp--preset--color--background) !important; } <\/style>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-c4cf3051 wp-block-group-is-layout-flex gs_y50npn group_wrap\">\n<div class=\"wp-block-group pa-cta-core_actions is-layout-flow wp-container-core-group-is-layout-2c90a543 wp-block-group-is-layout-flow\">\n<div style=\"gap: var(--wp--preset--spacing--tiny); \" class=\"wp-block-greyd-buttons\">\n<a  class=\"button is-style-sec gs_WSA83r is-size-small\">Secondary on-dark<\/a><style class=\"greyd-styles\">.gs_WSA83r { border-top: 2px solid #89baff !important; border-right: 2px solid #89baff !important; border-bottom: 2px solid #89baff !important; border-left: 2px solid #89baff !important; color: #89baff !important; background: var(--wp--preset--color--transparent) !important; padding-right: 20px !important; padding-left: 20px !important; } .gs_WSA83r:hover { border-top: 2px solid #89baff !important; border-right: 2px solid #89baff !important; border-bottom: 2px solid #89baff !important; border-left: 2px solid #89baff !important; color: var(--wp--preset--color--darkest) !important; background: #89baff !important; } <\/style>\n\n\n\n<a  class=\"button is-style-clear gs_zkNd5l \"><span style=\"flex:1\">Tertiary Link<\/span><span class=\"arrow_right\" style=\"vertical-align:middle;font-size:100%;margin-left:10px\" aria-hidden=\"true\"><\/span><\/a><style class=\"greyd-styles\">.gs_zkNd5l { padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; color: #89baff !important; } .gs_zkNd5l:hover { color: var(--wp--preset--color--background) !important; } <\/style>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-3ce67b86 wp-block-group-is-layout-flex\" style=\"padding-top:var(--wp--preset--spacing--tiny)\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-c4cf3051 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-c4cf3051 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-greyd-buttons\">\n<a role=\"button\" tabindex=\"0\" onclick=\"greyd.trigger.trigger(event, &quot;show_button&quot;, false);\" class=\"button  gs_2BAqkA is-size-big\"  data-anim-action=\"custom\" data-anim-event=\"hover\" data-anim-triggered=\"false\" data-anim-from=\"transform: scale(1);\n\" data-anim-to=\"transform: scale(1.1);\n\" data-anim-id=\"anim-6a8930314092b\"><span class=\"arrow_right\" style=\"vertical-align:middle;font-size:100%;margin-right:0px\" aria-hidden=\"true\"><\/span><span style=\"flex:1\"><\/span><\/a><style class=\"greyd-styles\">.gs_2BAqkA { color: var(--wp--preset--color--darkest) !important; padding-top: 1rem !important; padding-right: 1rem !important; padding-bottom: 1rem !important; padding-left: 1rem !important; border-top: 2px solid #89baff !important; border-right: 2px solid #89baff !important; border-bottom: 2px solid #89baff !important; border-left: 2px solid #89baff !important; background: #89baff !important; } .gs_2BAqkA:hover { color: var(--wp--preset--color--darkest) !important; background: var(--wp--preset--color--background) !important; border-top: 2px solid var(--wp--preset--color--background) !important; border-right: 2px solid var(--wp--preset--color--background) !important; border-bottom: 2px solid var(--wp--preset--color--background) !important; border-left: 2px solid var(--wp--preset--color--background) !important; } <\/style>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p class=\"has-background-color has-text-color has-link-color wp-elements-0f0e9f70f4253de3c15ba1253b7139a0 wp-block-paragraph\">Textlink &#8211; <a href=\"#\">Lorem ipsum dolor sit amet, consetetur sadipscing.<\/a><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-primary-background-color has-background is-vertical is-layout-flex wp-container-core-group-is-layout-c4cf3051 wp-block-group-is-layout-flex\">\n<p class=\"has-background-color has-text-color has-link-color wp-elements-5f9508f6698f699d0771b9f1f95e5add wp-block-paragraph\">*<strong><strong>5.30<\/strong><\/strong><\/p>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-f60f1ec2 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-77746977 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-6ca9fbf8 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-greyd-buttons\">\n<a  href=\"#\" class=\"button  gs_ciUlqr \">Primary sw<\/a><style class=\"greyd-styles\">.gs_ciUlqr { color: var(--wp--preset--color--background) !important; background: var(--wp--preset--color--darkest) !important; border-top: 2px solid var(--wp--preset--color--foreground) !important; border-right: 2px solid var(--wp--preset--color--foreground) !important; border-bottom: 2px solid var(--wp--preset--color--foreground) !important; border-left: 2px solid var(--wp--preset--color--foreground) !important; } .gs_ciUlqr:hover { color: var(--wp--preset--color--darkest) !important; background: var(--wp--preset--color--background) !important; border-top: 2px solid var(--wp--preset--color--background) !important; border-right: 2px solid var(--wp--preset--color--background) !important; border-bottom: 2px solid var(--wp--preset--color--background) !important; border-left: 2px solid var(--wp--preset--color--background) !important; } <\/style>\n<\/div>\n\n\n\n<div class=\"wp-block-greyd-buttons\">\n<a  href=\"#\" class=\"button is-style-trd gs_yrHj6B is-size-small\">Secondary  sw<\/a><style class=\"greyd-styles\">.gs_yrHj6B:hover { background: var(--wp--preset--color--darkest) !important; color: var(--wp--preset--color--background) !important; } <\/style>\n<\/div>\n\n\n<\/div>\n\n\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-d9c2f568 wp-block-group-is-layout-flex\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-6ca9fbf8 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-greyd-buttons\">\n<a  href=\"#\" class=\"button  gs_c54zRF \">Primary inverse<\/a><style class=\"greyd-styles\">.gs_c54zRF { color: var(--wp--preset--color--darkest) !important; background: var(--wp--preset--color--background) !important; border-top: 2px solid var(--wp--preset--color--background) !important; border-right: 2px solid var(--wp--preset--color--background) !important; border-bottom: 2px solid var(--wp--preset--color--background) !important; border-left: 2px solid var(--wp--preset--color--background) !important; } .gs_c54zRF:hover { color: var(--wp--preset--color--background) !important; background: var(--wp--preset--color--darkest) !important; border-top: 2px solid var(--wp--preset--color--darkest) !important; border-right: 2px solid var(--wp--preset--color--darkest) !important; border-bottom: 2px solid var(--wp--preset--color--darkest) !important; border-left: 2px solid var(--wp--preset--color--darkest) !important; } <\/style>\n<\/div>\n\n\n\n<div class=\"wp-block-greyd-buttons\">\n<a  href=\"#\" class=\"button is-style-trd gs_kdME0B is-size-small\">Secondary inverse<\/a><style class=\"greyd-styles\">.gs_kdME0B { border-top: 2px solid var(--wp--preset--color--background) !important; border-right: 2px solid var(--wp--preset--color--background) !important; border-bottom: 2px solid var(--wp--preset--color--background) !important; border-left: 2px solid var(--wp--preset--color--background) !important; color: var(--wp--preset--color--background) !important; } .gs_kdME0B:hover { background: var(--wp--preset--color--background) !important; color: var(--wp--preset--color--darkest) !important; border-top: 2px solid var(--wp--preset--color--background) !important; border-right: 2px solid var(--wp--preset--color--background) !important; border-bottom: 2px solid var(--wp--preset--color--background) !important; border-left: 2px solid var(--wp--preset--color--background) !important; } <\/style>\n<\/div>\n\n\n<\/div>\n\n\n<\/div>\n<\/div>\n\n\n\n<p class=\"has-background-color has-text-color has-link-color wp-elements-0f0e9f70f4253de3c15ba1253b7139a0 wp-block-paragraph\">Textlink &#8211; <a href=\"#\">Lorem ipsum dolor sit amet, consetetur sadipscing.<\/a><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-40a64f93 wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--medium)\">\n<p class=\"wp-block-paragraph\">*<strong>Wichtige Kriterien zur Pr\u00fcfung:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Button-Form:<\/strong>&nbsp;Der Rand oder Hintergrund des Buttons ben\u00f6tigt zum Seitenhintergrund einen Kontrast von mindestens 3:1, damit er als interaktiv erkennbar ist.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Text auf Button:<\/strong>&nbsp;Mindestens 4,5:1 (AA-Standard) f\u00fcr normalen Text, 3:1 f\u00fcr gro\u00dfen Text.<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u00dcbersicht: Links, Buttons und CTA Sections Kontextlogik Das CTA-Design basiert auf einer klaren Handlungs- und Priorit\u00e4tslogik. Ziel ist es, Nutzer gezielt zu f\u00fchren und auf den ersten Blick verst\u00e4ndlich zu machen: Was ist die wichtigste Handlung auf dieser Seite? Welche Aktionen sind erg\u00e4nzend oder optional? Primary \u2192 Conversion Button Filled Button | High&nbsp;Intent&nbsp; Einsatz: F\u00fcr [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"greyd_block_editor_preview":[],"footnotes":""},"top-partner":[],"footer-setting":[],"navpoint":[],"class_list":["post-24946","page","type-page","status-publish","hentry"],"lang":"de","translations":{"de":24946},"pll_sync_post":{},"_links":{"self":[{"href":"https:\/\/library.cancom.de\/master\/wp-json\/wp\/v2\/pages\/24946","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/library.cancom.de\/master\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/library.cancom.de\/master\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/library.cancom.de\/master\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/library.cancom.de\/master\/wp-json\/wp\/v2\/comments?post=24946"}],"version-history":[{"count":5,"href":"https:\/\/library.cancom.de\/master\/wp-json\/wp\/v2\/pages\/24946\/revisions"}],"predecessor-version":[{"id":29009,"href":"https:\/\/library.cancom.de\/master\/wp-json\/wp\/v2\/pages\/24946\/revisions\/29009"}],"wp:attachment":[{"href":"https:\/\/library.cancom.de\/master\/wp-json\/wp\/v2\/media?parent=24946"}],"wp:term":[{"taxonomy":"top-partner","embeddable":true,"href":"https:\/\/library.cancom.de\/master\/wp-json\/wp\/v2\/top-partner?post=24946"},{"taxonomy":"footer-setting","embeddable":true,"href":"https:\/\/library.cancom.de\/master\/wp-json\/wp\/v2\/footer-setting?post=24946"},{"taxonomy":"navpoint","embeddable":true,"href":"https:\/\/library.cancom.de\/master\/wp-json\/wp\/v2\/navpoint?post=24946"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}