diff --git a/src/docs/card.njk b/src/docs/card.njk
index 1ca75cb..4996337 100644
--- a/src/docs/card.njk
+++ b/src/docs/card.njk
@@ -39,7 +39,7 @@ title: Card
   <custom-card>
 	{% image "path-to-img", "alt-text" %}
 	<span slot="date"></span>
-	<span slot="tag" class="button post-tag"></span>
+	<span slot="tag" class="button"></span>
 	<h2 slot="headline"></h2>
 	<p slot="content"></p>
 	<footer slot="footer"></footer>
@@ -52,7 +52,7 @@ title: Card
   <custom-card>
     {% image "./src/assets/images/gallery/asturias-3.jpg", "Close-up of a delicate white flower with a yellow center, surrounded by green leaves" %}
     <span slot="date">1516</span>
-    <span slot="tag" class="button post-tag">Default</span>
+    <span slot="tag" class="button" data-small-button>Default</span>
     <h2 slot="headline">Utopia</h2>
     <p slot="content">
       Among them, there is no sort of traffic, no knowledge of letters, no understanding of numbers, no name
@@ -66,7 +66,8 @@ title: Card
     {% image "./src/assets/images/gallery/asturias-3.jpg", "Close-up of a delicate white flower with a yellow center, surrounded by green leaves" %}
     <span slot="date">18.02.1984</span>
     <div slot="tag" webc:nokeep>
-      <span class="button post-tag">clickable</span><span class="button post-tag">square image</span>
+      <span class="button" data-small-button>clickable</span
+      ><span class="button" data-small-button>square image</span>
     </div>
     <footer slot="footer"><a href="#">Link in the footer makes whole card a link</a></footer>
     <h2 slot="headline">The order does not matter</h2>
diff --git a/src/pages/styleguide.njk b/src/pages/styleguide.njk
index 32eb056..7a2d534 100644
--- a/src/pages/styleguide.njk
+++ b/src/pages/styleguide.njk
@@ -30,6 +30,34 @@ customGradients:
     </p>
   </header>
 
+  <section class="flow region region-space-m">
+    <h2 class="heading-line">Buttons</h2>
+    <ul class="cluster" role="list">
+      <li>
+        <a href="#" class="button">Default button</a>
+      </li>
+      <li>
+        <a href="#" class="button" data-button-variant="primary">blue button</a>
+      </li>
+      <li>
+        <a href="#" class="button" data-button-variant="secondary">red button</a>
+      </li>
+      <li>
+        <a href="#" class="button" data-button-variant="tertiary">yellow button</a>
+      </li>
+
+      <li>
+        <a href="#" class="button" data-ghost-button>Ghost button</a>
+      </li>
+      <li>
+        <a href="#" class="button" data-button-radius="hard">Hard edges</a>
+      </li>
+      <li>
+        <a href="#" class="button"> {% svg "misc/star" %} Button with icon </a>
+      </li>
+    </ul>
+  </section>
+
   <div class="full colors | section">
     <section class="section__inner wrapper flow region">
       <h2 class="heading-line">Colors</h2>