diff --git a/less/_buttons.less b/less/_buttons.less
index 5bd7de37..dbc5eaa3 100644
--- a/less/_buttons.less
+++ b/less/_buttons.less
@@ -58,13 +58,15 @@
   //--
   // color variations
   &.btn-raised,
-  &.btn-fab {
+  &.btn-fab,
+  .btn-group-raised & {
     .background-variations(~".btn", ~"", @mdb-btn-background-color);
   }
 
   //---
   // btn-raised
-  &.btn-raised {
+  &.btn-raised,
+  .btn-group-raised & {
     &:not(.btn-link) {
       .shadow-2dp();
 
@@ -77,7 +79,8 @@
         // FIXME: SPEC - this should be the 600 color, how can we get that programmatically if at all? Or are we limited to the color palette only?
         // SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
         .generic-variations(~".btn", ~"", @mdb-btn-background-color, {
-          background-color: contrast(@variation-color, darken(@variation-color, 4%), lighten(@variation-color, 4%), @contrast-factor); });
+          background-color: contrast(@variation-color, darken(@variation-color, 4%), lighten(@variation-color, 4%), @contrast-factor);
+        });
 
         // Spec:
         //  - Raised Light/Light theme no hover.
diff --git a/sass/_buttons.scss b/sass/_buttons.scss
index 6d0341f0..e8566b76 100644
--- a/sass/_buttons.scss
+++ b/sass/_buttons.scss
@@ -60,13 +60,15 @@
   //--
   // color variations
   &.btn-raised,
-  &.btn-fab {
+  &.btn-fab,
+  .btn-group-raised & {
     @include background-variations(unquote(".btn"), unquote(""), $mdb-btn-background-color);
   }
 
   //---
   // btn-raised
-  &.btn-raised {
+  &.btn-raised,
+  .btn-group-raised & {
     &:not(.btn-link) {
       @include shadow-2dp();
 
diff --git a/testcase.html b/testcase.html
index c7c0ff96..457bdd30 100644
--- a/testcase.html
+++ b/testcase.html
@@ -40,27 +40,30 @@ Test case
 -->
 
 <div class="container">
-
-  <h4><mark>btn</mark></h4>
-  <a href="javascript:void(0)" class="btn"><code>btn</code></a>
-  <a href="javascript:void(0)" class="btn active"><code>.active</code></a>
-
-  <h4><mark>btn.btn-raised</mark></h4>
-  <a href="javascript:void(0)" class="btn btn-raised"><code>btn</code></a>
-  <a href="javascript:void(0)" class="btn btn-raised active"><code>.active</code></a>
-
-  <h4><mark>btn.btn-default</mark></h4>
-  <a href="javascript:void(0)" class="btn btn-default"><code>btn</code></a>
-  <a href="javascript:void(0)" class="btn btn-default active"><code>.active</code></a>
-
-  <h4><mark>btn.btn-default.btn-raised</mark></h4>
-  <a href="javascript:void(0)" class="btn btn-raised btn-default"><code>btn</code></a>
-  <a href="javascript:void(0)" class="btn btn-raised btn-default active"><code>.active</code></a>
-
-
-  <h4><mark>btn.btn-primary.btn-raised</mark></h4>
-  <a href="javascript:void(0)" class="btn btn-raised btn-primary"><code>btn</code></a>
-  <a href="javascript:void(0)" class="btn btn-raised btn-primary active"><code>.active</code></a>
+  <mark>.btn-group-raised</mark>
+  <div class="btn-group btn-group-sm btn-group-justified btn-group-raised" role="group">
+    <label class="btn btn-primary active">
+      active
+    </label>
+    <label class="btn btn-primary">
+      unread
+    </label>
+    <label class="btn btn-primary">
+      starred
+    </label>
+  </div>
+  <mark>.btn.btn-raised</mark>
+  <div class="btn-group btn-group-sm btn-group-justified" role="group">
+    <label class="btn btn-primary btn-raised active">
+      active
+    </label>
+    <label class="btn btn-primary btn-raised ">
+      unread
+    </label>
+    <label class="btn btn-primary btn-raised">
+      starred
+    </label>
+  </div>
 </div>
 
 <!--