Add call to action button component

components/interactive-elements.html

@@ -29,6 +29,17 @@
     </div>
   </section>
 
+  <!-- Component: Call-to-action-Button -->
+  <section id="component-call-to-action-button">
+    <p class="sg-preview-label">Component: Call-to-action-Button</p>
+
+    <div class="sg-component-row">
+      <button class="sg-interaction-element sg-button sg-button--cta" type="button" data-component="button" data-component-variant="cta">
+        Call-to-action-Button
+      </button>
+    </div>
+  </section>
+
   <!-- Component: Prozessbutton -->
   <section id="component-process-button">
     <p class="sg-preview-label">Component: Prozessbutton</p>

semantic-tokens-components.html

@@ -124,6 +124,16 @@
       </tbody>
     </table>
 
+    <h3 class="sg-sub-heading sg-section-h3">Call-to-action-Button</h3>
+    <table class="sg-foundation-table sg-table-label">
+      <thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead>
+      <tbody>
+        <tr><td>surface-button-cta</td><td>color-darkblue</td><td>Fläche des Call-to-action-Buttons.</td></tr>
+        <tr><td>text-button-cta</td><td>color-font-light</td><td>Textfarbe des Call-to-action-Buttons.</td></tr>
+        <tr><td>layout-button-cta-padding</td><td>spacing-large</td><td>Innenabstand des Call-to-action-Buttons auf allen Seiten.</td></tr>
+      </tbody>
+    </table>
+
     <h3 class="sg-sub-heading sg-section-h3">Tabs</h3>
     <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
       <tr><td>surface-tab-selected</td><td>color-dark-grey</td><td>Fläche des ausgewählten Tabs.</td></tr>

styles/10-components-interactive-elements.css

@@ -142,6 +142,16 @@
       color: var(--text-button-process);
     }
 
+    .sg-button--cta {
+      --surface-button-cta: var(--color-darkblue);
+      --text-button-cta: var(--color-font-light);
+      height: auto;
+      min-height: var(--interaction-height);
+      background: var(--surface-button-cta);
+      color: var(--text-button-cta);
+      padding: var(--spacing-large);
+    }
+
     .sg-button--process-inactive {
       background: var(--surface-button-process-inactive);
       color: var(--text-button-process);