diff --git a/exampleSite/content/shortcodes/button.en.md b/exampleSite/content/shortcodes/button.en.md
index 68e40ba799..3b82dbfe8a 100644
--- a/exampleSite/content/shortcodes/button.en.md
+++ b/exampleSite/content/shortcodes/button.en.md
@@ -5,7 +5,9 @@ title = "Button"
 
 The `button` shortcode displays a clickable button with adjustable color, title and icon.
 
-{{% button href="https://gohugo.io/" icon="download" %}}Get Hugo{{% /button %}}
+{{% button href="https://gohugo.io/" icon="download" icon-position="right" %}}Get Hugo{{% /button %}}
+{{% button href="https://gohugo.io/" style="default" %}}Get Hugo{{% /button %}}
+{{% button href="https://gohugo.io/" icon="dragon" style="warning" %}}Get Hugo{{% /button %}}
 
 ## Usage
 
diff --git a/static/css/ie.css b/static/css/ie.css
index eec9cffd1a..941c3107ee 100644
--- a/static/css/ie.css
+++ b/static/css/ie.css
@@ -85,7 +85,7 @@
 	}
 
 	div.box {
-		background-color: #808080; /* var(--INTERNAL-BOX-NEUTRAL-color) */
+		background-color: rgba( 128, 128, 128, 1 ); /* var(--INTERNAL-BOX-NEUTRAL-color) */
 	}
 
 	div.box > .box-label {
@@ -162,7 +162,7 @@
 	}
 
 	div.box.grey {
-		background-color: #808080; /* var(--INTERNAL-BOX-GREY-color) */
+		background-color: rgba( 128, 128, 128, 1 ); /* var(--INTERNAL-BOX-GREY-color) */
 	}
 
 	div.box.grey > .box-content {
@@ -277,14 +277,123 @@
 		background-color: #ffffff; /* var(--MAIN-BG-color) */
 	}
 
-	.btn-default {
+	.btn {
+		background-color: rgba( 128, 128, 128, 1 ); /* var(--BOX-NEUTRAL-color) */
+	}
+
+	.btn a {
+		border-color: rgba( 128, 128, 128, 1 ); /* var(--BOX-NEUTRAL-color) */
+		color: rgba( 255, 255, 255, 1 ); /* var(--BOX-CAPTION-color) */
+	}
+
+	.btn a:hover,
+	.btn a:focus,
+	.btn a:active {
+		background-color: rgba( 255, 255, 255, .833 ); /* var(--BOX-BG-color) */
+		color: rgba( 16, 16, 16, 1 ); /* var(--BOX-NEUTRAL-TEXT-color) */
+	}
+
+	.btn.cstyle.info {
+		background-color: rgba( 48, 117, 229, 1 ); /* var(--BOX-INFO-color) */
+	}
+
+	.btn.cstyle.info a {
+		border-color: rgba( 48, 117, 229, 1 ); /* var(--BOX-INFO-color) */
+	}
+
+	.btn.cstyle.note {
+		background-color: rgba( 237, 153, 9, 1 ); /* var(--BOX-NOTE-color) */
+	}
+
+	.btn.cstyle.note a {
+		border-color: rgba( 237, 153, 9, 1 ); /* var(--BOX-NOTE-color) */
+	}
+
+	.btn.cstyle.tip {
+		background-color: rgba( 42, 178, 24, 1 ); /* var(--BOX-TIP-color) */
+	}
+
+	.btn.cstyle.tip a {
+		border-color: rgba( 42, 178, 24, 1 ); /* var(--BOX-TIP-color) */
+	}
+
+	.btn.cstyle.warning {
+		background-color: rgba( 224, 62, 62, 1 ); /* var(--BOX-WARNING-color) */
+	}
+
+	.btn.cstyle.warning a {
+		border-color: rgba( 224, 62, 62, 1 ); /* var(--BOX-WARNING-color) */
+	}
+
+	.btn.cstyle.primary {
+		background-color: #7dc903; /* var(--PRIMARY-color) */
+	}
+
+	.btn.cstyle.primary a {
+		border-color: #7dc903; /* var(--PRIMARY-color) */
+	}
+
+	.btn.cstyle.secondary {
+		background-color: #486ac9; /* var(--SECONDARY-color) */
+	}
+
+	.btn.cstyle.secondary a {
+		border-color: #486ac9; /* var(--SECONDARY-color) */
+	}
+
+	.btn.cstyle.blue {
+		background-color: rgba( 48, 117, 229, 1 ); /* var(--BOX-BLUE-color) */
+	}
+
+	.btn.cstyle.blue a {
+		border-color: rgba( 48, 117, 229, 1 ); /* var(--BOX-BLUE-color) */
+	}
+
+	.btn.cstyle.green {
+		background-color: rgba( 42, 178, 24, 1 ); /* var(--BOX-GREEN-color) */
+	}
+
+	.btn.cstyle.green a {
+		border-color: rgba( 42, 178, 24, 1 ); /* var(--BOX-GREEN-color) */
+	}
+
+	.btn.cstyle.grey {
+		background-color: rgba( 128, 128, 128, 1 ); /* var(--BOX-GREY-color) */
+	}
+
+	.btn.cstyle.grey a {
+		border-color: rgba( 128, 128, 128, 1 ); /* var(--BOX-GREY-color) */
+	}
+
+	.btn.cstyle.orange {
+		background-color: rgba( 237, 153, 9, 1 ); /* var(--BOX-ORANGE-color) */
+	}
+
+	.btn.cstyle.orange a {
+		border-color: rgba( 237, 153, 9, 1 ); /* var(--BOX-ORANGE-color) */
+	}
+
+	.btn.cstyle.red {
+		background-color: rgba( 224, 62, 62, 1 ); /* var(--BOX-RED-color) */
+	}
+
+	.btn.cstyle.red a {
+		border-color: rgba( 224, 62, 62, 1 ); /* var(--BOX-RED-color) */
+	}
+
+	.btn.cstyle.transparent {
+		background-color: transparent;
 		color: #101010; /* var(--MAIN-TEXT-color) */
 	}
 
-	.btn-default:hover,
-	.btn-default:focus,
-	.btn-default:active {
-		color: #ffffff;/* var(--MAIN-BG-color) */
+	.btn.cstyle.transparent:hover,
+	.btn.cstyle.transparent:focus,
+	.btn.cstyle.transparent:active {
+		background-color: rgba( 128, 128, 128, 1 ); /* var(--BOX-NEUTRAL-color) */
+	}
+
+	.btn.cstyle.transparent a {
+		color: #4a4a4a; /* var(--MAIN-TITLES-TEXT-color) */
 	}
 
 	#body .tags a.tag-link {