{"id":4410,"date":"2026-08-31T07:45:01","date_gmt":"2026-08-31T07:45:01","guid":{"rendered":"https:\/\/staging02.topzir.com\/?page_id=4410"},"modified":"2026-08-31T08:19:07","modified_gmt":"2026-08-31T08:19:07","slug":"p2-button-test","status":"publish","type":"page","link":"https:\/\/staging02.topzir.com\/de\/p2-button-test\/","title":{"rendered":"P2 Button Test"},"content":{"rendered":"<div class=\"topzir-btn-demo\">\n  <h2 style=\"font-family:var(--font-primary);color:var(--black);font-size:var(--type-heading-2);margin-bottom:var(--space-md);\">Button Component Test<\/h2>\n  <div style=\"display:flex;gap:var(--space-md);align-items:center;flex-wrap:wrap;\">\n    <button class=\"tz-btn tz-btn-primary\">Contact Topzir<\/button>\n    <button class=\"tz-btn tz-btn-primary\" disabled>Disabled<\/button>\n    <button class=\"tz-btn tz-btn-outline\">Learn More<\/button>\n  <\/div>\n<\/div>\n\n<div class=\"topzir-lang-demo\" style=\"margin-top:var(--space-xl);\">\n  <h2 style=\"font-family:var(--font-primary);color:var(--black);font-size:var(--type-heading-2);margin-bottom:var(--space-md);\">Language Selector Test<\/h2>\n  <div style=\"display:flex;gap:var(--space-md);align-items:center;flex-wrap:wrap;\">\n    <div class=\"tz-lang-switcher\">\n      <button class=\"tz-lang-current\">\n        <svg width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"\/><path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"\/><\/svg>\n        EN\n        <svg width=\"10\" height=\"10\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>\n      <\/button>\n      <ul class=\"tz-lang-dropdown\">\n        <li class=\"tz-lang-item active\">English<\/li>\n        <li class=\"tz-lang-item\">Chinese (Simplified)<\/li>\n        <li class=\"tz-lang-item\">German<\/li>\n        <li class=\"tz-lang-item\">Spanish<\/li>\n      <\/ul>\n    <\/div>\n    <button class=\"tz-btn tz-btn-primary\" style=\"padding:8px 20px;font-size:var(--type-caption);\">CONTACT TOPZIR<\/button>\n  <\/div>\n<\/div>\n\n<style>\n\/* === Topzir Button Component === *\/\n.tz-btn {\n  font-family: var(--font-primary);\n  font-size: var(--type-body-small);\n  font-weight: 600;\n  padding: 12px 32px;\n  border: none;\n  border-radius: var(--radius-sm);\n  cursor: pointer;\n  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;\n  letter-spacing: -0.015em;\n  outline: none !important;\n  -webkit-tap-highlight-color: transparent;\n}\n.tz-btn:focus, .tz-btn:active {\n  outline: none !important;\n  box-shadow: none !important;\n}\n.tz-btn-primary { background: var(--color-primary); color: var(--white); }\n.tz-btn-primary:hover { background: var(--color-primary-hover); }\n.tz-btn-primary:focus, .tz-btn-primary:active {\n  background: var(--color-primary) !important;\n  color: var(--white) !important;\n}\n.tz-btn-primary:disabled { background: var(--color-text-muted); cursor: not-allowed; }\n.tz-btn-outline { background: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); }\n.tz-btn-outline:hover { background: var(--color-teal-50); border-color: var(--color-primary-hover); color: var(--color-primary-hover); }\n.tz-btn-outline:focus, .tz-btn-outline:active {\n  background: transparent !important;\n  color: var(--color-primary) !important;\n  border-color: var(--color-primary) !important;\n}\n\n\/* === Topzir Language Selector === *\/\n.tz-lang-switcher { position: relative; display: inline-block; }\n.tz-lang-current {\n  display: flex; align-items: center; gap: 6px;\n  background: transparent; border: 1px solid var(--color-border-subtle);\n  padding: 8px 16px; border-radius: var(--radius-sm);\n  font-family: var(--font-primary); font-size: var(--type-caption);\n  color: var(--color-text-primary); cursor: pointer;\n  transition: border-color 0.2s ease, color 0.2s ease;\n  outline: none !important;\n  -webkit-tap-highlight-color: transparent;\n}\n.tz-lang-current:hover { border-color: var(--color-border-active); color: var(--color-primary); }\n.tz-lang-current:focus, .tz-lang-current:active {\n  border-color: var(--color-border-subtle) !important;\n  color: var(--color-text-primary) !important;\n  background: transparent !important;\n}\n.tz-lang-dropdown {\n  display: none; position: absolute; top: 100%; left: 0;\n  padding-top: 4px; \/* replaces margin-top to keep hover continuous *\/\n  background: transparent; \/* transparent bridge for hover *\/\n  list-style: none; min-width: 160px; z-index: 100;\n  margin: 0;\n}\n.tz-lang-dropdown-inner {\n  background: var(--color-bg-elevated); border: 1px solid var(--color-border-subtle);\n  border-radius: var(--radius-sm); padding: 0;\n  box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n}\n.tz-lang-switcher:hover .tz-lang-dropdown { display: block; }\n.tz-lang-item {\n  padding: 8px 16px; font-family: var(--font-primary); font-size: var(--type-caption);\n  color: var(--color-text-secondary); cursor: pointer; list-style: none;\n  transition: background 0.15s ease, color 0.15s ease;\n}\n.tz-lang-item:hover { background: var(--color-teal-50); color: var(--color-primary); }\n.tz-lang-item.active { color: var(--color-primary); font-weight: 600; }\n<\/style>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"text-align:center;font-family:var(--font-primary);font-size:var(--type-caption);color:var(--color-text-muted);\">Page 4410 &#8211; P2 Module Verification V2 | Fixed: button focus\/active + lang hover gap<\/p>","protected":false},"excerpt":{"rendered":"<p>Button Component Test Contact Topzir Disabled Learn More Language Selector Test EN English Chinese (Simplified) German Spanish CONTACT TOPZIR Page 4410 &#8211; P2 Module Verification V2 | Fixed: button focus\/active + lang hover gap<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"footnotes":""},"class_list":["post-4410","page","type-page","status-publish","hentry"],"acf":[],"aioseo_notices":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.4 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>P2 Button Test - Topzir<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/staging02.topzir.com\/de\/p2-button-test\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"P2 Button Test\" \/>\n<meta property=\"og:description\" content=\"Button Component Test Contact Topzir Disabled Learn More Language Selector Test EN English Chinese (Simplified) German Spanish CONTACT TOPZIR Page 4410 &#8211; P2 Module Verification V2 | Fixed: button focus\/active + lang hover gap\" \/>\n<meta property=\"og:url\" content=\"https:\/\/staging02.topzir.com\/de\/p2-button-test\/\" \/>\n<meta property=\"og:site_name\" content=\"Topzir\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-31T08:19:07+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/staging02.topzir.com\/p2-button-test\/\",\"url\":\"https:\/\/staging02.topzir.com\/p2-button-test\/\",\"name\":\"P2 Button Test - Topzir\",\"isPartOf\":{\"@id\":\"https:\/\/staging02.topzir.com\/#website\"},\"datePublished\":\"2026-08-31T07:45:01+00:00\",\"dateModified\":\"2026-08-31T08:19:07+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/staging02.topzir.com\/p2-button-test\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/staging02.topzir.com\/p2-button-test\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/staging02.topzir.com\/p2-button-test\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/staging02.topzir.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"P2 Button Test\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/staging02.topzir.com\/#website\",\"url\":\"https:\/\/staging02.topzir.com\/\",\"name\":\"Topzir\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/staging02.topzir.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/staging02.topzir.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/staging02.topzir.com\/#organization\",\"name\":\"Topzir\",\"url\":\"https:\/\/staging02.topzir.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/staging02.topzir.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/staging02.topzir.com\/wp-content\/uploads\/2023\/08\/topzir_logo.svg\",\"contentUrl\":\"https:\/\/staging02.topzir.com\/wp-content\/uploads\/2023\/08\/topzir_logo.svg\",\"width\":140,\"height\":49,\"caption\":\"Topzir\"},\"image\":{\"@id\":\"https:\/\/staging02.topzir.com\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"P2 Button Test - Topzir","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:\/\/staging02.topzir.com\/de\/p2-button-test\/","og_locale":"de_DE","og_type":"article","og_title":"P2 Button Test","og_description":"Button Component Test Contact Topzir Disabled Learn More Language Selector Test EN English Chinese (Simplified) German Spanish CONTACT TOPZIR Page 4410 &#8211; P2 Module Verification V2 | Fixed: button focus\/active + lang hover gap","og_url":"https:\/\/staging02.topzir.com\/de\/p2-button-test\/","og_site_name":"Topzir","article_modified_time":"2026-08-31T08:19:07+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/staging02.topzir.com\/p2-button-test\/","url":"https:\/\/staging02.topzir.com\/p2-button-test\/","name":"P2 Button Test - Topzir","isPartOf":{"@id":"https:\/\/staging02.topzir.com\/#website"},"datePublished":"2026-08-31T07:45:01+00:00","dateModified":"2026-08-31T08:19:07+00:00","breadcrumb":{"@id":"https:\/\/staging02.topzir.com\/p2-button-test\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/staging02.topzir.com\/p2-button-test\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/staging02.topzir.com\/p2-button-test\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/staging02.topzir.com\/"},{"@type":"ListItem","position":2,"name":"P2 Button Test"}]},{"@type":"WebSite","@id":"https:\/\/staging02.topzir.com\/#website","url":"https:\/\/staging02.topzir.com\/","name":"Topzir","description":"","publisher":{"@id":"https:\/\/staging02.topzir.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/staging02.topzir.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/staging02.topzir.com\/#organization","name":"Topzir","url":"https:\/\/staging02.topzir.com\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/staging02.topzir.com\/#\/schema\/logo\/image\/","url":"https:\/\/staging02.topzir.com\/wp-content\/uploads\/2023\/08\/topzir_logo.svg","contentUrl":"https:\/\/staging02.topzir.com\/wp-content\/uploads\/2023\/08\/topzir_logo.svg","width":140,"height":49,"caption":"Topzir"},"image":{"@id":"https:\/\/staging02.topzir.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/staging02.topzir.com\/de\/wp-json\/wp\/v2\/pages\/4410","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging02.topzir.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/staging02.topzir.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/staging02.topzir.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/staging02.topzir.com\/de\/wp-json\/wp\/v2\/comments?post=4410"}],"version-history":[{"count":4,"href":"https:\/\/staging02.topzir.com\/de\/wp-json\/wp\/v2\/pages\/4410\/revisions"}],"predecessor-version":[{"id":4419,"href":"https:\/\/staging02.topzir.com\/de\/wp-json\/wp\/v2\/pages\/4410\/revisions\/4419"}],"wp:attachment":[{"href":"https:\/\/staging02.topzir.com\/de\/wp-json\/wp\/v2\/media?parent=4410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}