diff --git a/site/themes/arangodb-docs-theme/layouts/shortcodes/button.html b/site/themes/arangodb-docs-theme/layouts/shortcodes/button.html
new file mode 100644
index 0000000000..474cb4bf4a
--- /dev/null
+++ b/site/themes/arangodb-docs-theme/layouts/shortcodes/button.html
@@ -0,0 +1,4 @@
+{{ $link := .Get "link" | default "" }}
+{{ $color := .Get "color" | default "green" }}
+
+<a href="{{ $link }}" target="_blank" rel="noopener noreferrer"><button class="{{ $color }}">{{ .Inner | safeHTML }}</button></a>
diff --git a/site/themes/arangodb-docs-theme/static/css/theme.css b/site/themes/arangodb-docs-theme/static/css/theme.css
index 089546cbc5..62f0e8a7b4 100644
--- a/site/themes/arangodb-docs-theme/static/css/theme.css
+++ b/site/themes/arangodb-docs-theme/static/css/theme.css
@@ -144,6 +144,24 @@ button, input, optgroup, select, textarea {
     margin-bottom: 15px;
 }
 
+button {
+    border-radius: 4px;
+    font-weight: 700;
+    line-height: 16px;
+    min-height: 16px;
+    font-size: 14px;
+    padding: 12px 24px;
+    color: white;
+    margin-bottom: 28px;
+}
+
+button.green {
+    background-color: var(--HEADERS-COLOR);
+}
+
+button.grey {
+    background-color: var(--gray-600);
+}
 
 ul, ol {
     margin-bottom: 20px;