diff --git a/src/app/pages/ui-features/buttons/buttons.component.scss b/src/app/pages/ui-features/buttons/buttons.component.scss
index bc4259e6..e247c25e 100644
--- a/src/app/pages/ui-features/buttons/buttons.component.scss
+++ b/src/app/pages/ui-features/buttons/buttons.component.scss
@@ -1,10 +1,6 @@
 @import '../../../@theme/styles/variables';
 @import '~@akveo/nga-theme/styles/global/bootstrap/buttons';
 
-@mixin btn-bg($background) {
-  background-color: $background;
-}
-
 @include nga-install-component() {
   /deep/ {
     $button-size: 50px;
@@ -12,39 +8,38 @@
 
     .btn-demo {
       width: 180px;
-      height: 48px;
     }
 
-    .states-container .state-container {
+    .state-container {
       display: flex;
-    }
 
-    .states-container .state-container .state-value {
-      width: $button-size;
-      height: $button-size;
-      border-radius: $button-border-radius;
-    }
+      &:not(:last-child) {
+        margin-bottom: 1rem;
+      }
 
-    .states-container .state-container .state-details {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      margin-left: 1rem;
-      height: $button-size;
-    }
+      .state-value {
+        width: $button-size;
+        height: $button-size;
+        border-radius: $button-border-radius;
+      }
 
-    .states-container .state-container .state-details .header {
-      color: white;
-    }
+      .state-details {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin-left: 1rem;
+        height: $button-size;
 
-    .states-container .state-container .state-details .subheader {
-      font-size: 0.875rem;
-      line-height: 1rem;
-      font-weight: 300;
-    }
+        .header {
+          color: white;
+        }
 
-    .states-container .state-container:not(:last-child) .state-value {
-      margin-bottom: 1rem;
+        .subheader {
+          font-size: 0.875rem;
+          line-height: 1rem;
+          font-weight: 300;
+        }
+      }
     }
 
     .example-container {
@@ -60,179 +55,6 @@
       margin-bottom: 1rem;
     }
 
-    .hero-buttons {
-      .example-container .states-container.primary-container .gradient {
-        @include btn-hero-primary-gradient();
-      }
-
-      .example-container .states-container.primary-container .glow {
-        @include btn-hero-primary-glow();
-      }
-
-      .example-container .states-container.primary-container .bevel-border {
-        @include btn-hero-primary-bevel();
-      }
-
-      .example-container .states-container.primary-container .shadow {
-        @include btn-hero-shadow();
-      }
-
-      .example-container .states-container.warning-container .gradient {
-        @include btn-hero-warning-gradient();
-      }
-
-      .example-container .states-container.warning-container .glow {
-        @include btn-hero-warning-glow();
-      }
-
-      .example-container .states-container.warning-container .bevel-border {
-        @include btn-hero-warning-bevel();
-      }
-
-      .example-container .states-container.warning-container .shadow {
-        @include btn-hero-shadow();
-      }
-
-      .example-container .states-container.success-container .gradient {
-        @include btn-hero-success-gradient();
-      }
-
-      .example-container .states-container.success-container .glow {
-        @include btn-hero-success-glow();
-      }
-
-      .example-container .states-container.success-container .bevel-border {
-        @include btn-hero-success-bevel();
-      }
-
-      .example-container .states-container.success-container .shadow {
-        @include btn-hero-shadow();
-      }
-
-      .example-container .states-container.info-container .gradient {
-        @include btn-hero-info-gradient();
-      }
-
-      .example-container .states-container.info-container .glow {
-        @include btn-hero-info-glow();
-      }
-
-      .example-container .states-container.info-container .bevel-border {
-        @include btn-hero-info-bevel();
-      }
-
-      .example-container .states-container.info-container .shadow {
-        @include btn-hero-shadow();
-      }
-
-      .example-container .states-container.danger-container .gradient {
-        @include btn-hero-danger-gradient();
-      }
-
-      .example-container .states-container.danger-container .glow {
-        @include btn-hero-danger-glow();
-      }
-
-      .example-container .states-container.danger-container .bevel-border {
-        @include btn-hero-danger-bevel();
-      }
-
-      .example-container .states-container.danger-container .shadow {
-        @include btn-hero-shadow();
-      }
-
-      .example-container .states-container.secondary-container .border {
-        color: nga-theme(btn-secondary-color);
-        border: nga-theme(btn-secondary-border-width) solid nga-theme(btn-secondary-border);
-      }
-
-      .example-container .states-container.secondary-container .glow {
-        @include btn-hero-secondary-glow();
-      }
-
-      .example-container .states-container.secondary-container .bevel-border {
-        @include btn-hero-secondary-bevel();
-      }
-
-      .example-container .states-container.secondary-container .shadow {
-        @include btn-hero-shadow();
-      }
-    }
-
-    .default-buttons {
-      .example-container .states-container.primary-container .original {
-        @include btn-bg(nga-theme(btn-primary-bg));
-      }
-
-      .example-container .states-container.primary-container .hover {
-        @include btn-primary-hover();
-      }
-
-      .example-container .states-container.primary-container .active {
-        @include btn-primary-active();
-      }
-
-      .example-container .states-container.warning-container .original {
-        @include btn-bg(nga-theme(btn-warning-bg));
-      }
-
-      .example-container .states-container.warning-container .hover {
-        @include btn-warning-hover();
-      }
-
-      .example-container .states-container.warning-container .active {
-        @include btn-warning-active();
-      }
-
-      .example-container .states-container.success-container .original {
-        @include btn-bg(nga-theme(btn-success-bg));
-      }
-
-      .example-container .states-container.success-container .hover {
-        @include btn-success-hover();
-      }
-
-      .example-container .states-container.success-container .active {
-        @include btn-success-active();
-      }
-
-      .example-container .states-container.info-container .original {
-        @include btn-bg(nga-theme(btn-info-bg));
-      }
-
-      .example-container .states-container.info-container .hover {
-        @include btn-info-hover();
-      }
-
-      .example-container .states-container.info-container .active {
-        @include btn-info-active();
-      }
-
-      .example-container .states-container.danger-container .original {
-        @include btn-bg(nga-theme(btn-danger-bg));
-      }
-
-      .example-container .states-container.danger-container .hover {
-        @include btn-danger-hover();
-      }
-
-      .example-container .states-container.danger-container .active {
-        @include btn-danger-active();
-      }
-
-      .example-container .states-container.secondary-container .original {
-        @include btn-bg(nga-theme(btn-secondary-border));
-      }
-
-      .example-container .states-container.secondary-container .hover {
-        @include btn-secondary-hover();
-      }
-
-      .example-container .states-container.secondary-container .active {
-        @include btn-secondary-active();
-      }
-    }
-
     .actions-groups {
       display: flex !important;
     }
diff --git a/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.html b/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.html
index a96f2349..062ace74 100644
--- a/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.html
+++ b/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.html
@@ -1,7 +1,7 @@
 <nga-card>
   <nga-card-header>Default Buttons</nga-card-header>
   <nga-card-body>
-    <div class="row default-buttons">
+    <div class="row">
       <div class="example-container col-md-4" *ngFor="let b of buttons">
         <div class="container-title">
           <span>{{ b.containerTitle }}</span>
diff --git a/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.scss b/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.scss
new file mode 100644
index 00000000..39d2c5e9
--- /dev/null
+++ b/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.scss
@@ -0,0 +1,77 @@
+@import '../../../../@theme/styles/variables';
+@import '~@nga/theme/styles/global/bootstrap/buttons';
+
+@include nga-install-component() {
+
+  .primary-container {
+    .original {
+      background-color: nga-theme(btn-primary-bg);
+    }
+    .hover {
+      @include btn-primary-hover();
+    }
+    .active {
+      @include btn-primary-active();
+    }
+  }
+
+  .warning-container {
+    .original {
+      background-color: nga-theme(btn-warning-bg);
+    }
+    .hover {
+      @include btn-warning-hover();
+    }
+    .active {
+      @include btn-warning-active();
+    }
+  }
+
+  .success-container {
+    .original {
+      background-color: nga-theme(btn-success-bg);
+    }
+    .hover {
+      @include btn-success-hover();
+    }
+    .active {
+      @include btn-success-active();
+    }
+  }
+
+  .info-container {
+    .original {
+      background-color: nga-theme(btn-info-bg);
+    }
+    .hover {
+      @include btn-info-hover();
+    }
+    .active {
+      @include btn-info-active();
+    }
+  }
+
+  .danger-container {
+    .original {
+      background-color: nga-theme(btn-danger-bg);
+    }
+    .hover {
+      @include btn-danger-hover();
+    }
+    .active {
+      @include btn-danger-active();
+    }
+  }
+
+  .secondary-container {
+    .original {
+      background-color: nga-theme(btn-secondary-border);
+    }
+    .hover {
+      @include btn-secondary-hover();
+    }
+    .active {
+      @include btn-secondary-active();
+    }
+  }
+}
diff --git a/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.ts b/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.ts
index 7622bf84..6b319c09 100644
--- a/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.ts
+++ b/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ngx-default-buttons',
+  styleUrls: ['./default-buttons.component.scss'],
   templateUrl: './default-buttons.component.html',
 })
 export class DefaultButtonsComponent {
diff --git a/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.html b/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.html
index 43a870c8..dd6f3f76 100644
--- a/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.html
+++ b/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.html
@@ -1,7 +1,7 @@
 <nga-card>
   <nga-card-header>Hero Buttons</nga-card-header>
   <nga-card-body>
-    <div class="row hero-buttons">
+    <div class="row">
       <div class="example-container col-md-2" *ngFor="let hb of heroButtons">
         <div class="container-title">
           <span>{{ hb.title }}</span>
@@ -25,7 +25,7 @@
             </div>
           </div>
           <div class="state-container">
-            <div class="state-value bevel-border"></div>
+            <div class="state-value bevel"></div>
             <div class="state-details">
               <span class="header">Bevel Border</span>
               <span class="subheader">0 3px 0 0</span>
diff --git a/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.scss b/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.scss
new file mode 100644
index 00000000..df3e8877
--- /dev/null
+++ b/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.scss
@@ -0,0 +1,96 @@
+@import '../../../../@theme/styles/variables';
+@import '~@nga/theme/styles/global/bootstrap/buttons';
+
+@include nga-install-component() {
+
+  .primary-container {
+    .gradient {
+      @include btn-hero-primary-gradient();
+    }
+    .glow {
+      box-shadow: btn-hero-primary-glow();
+    }
+    .bevel {
+      box-shadow: btn-hero-primary-bevel();
+    }
+    .shadow {
+      box-shadow: btn-hero-shadow();
+    }
+  }
+
+  .warning-container {
+    .gradient {
+      @include btn-hero-warning-gradient();
+    }
+    .glow {
+      box-shadow: btn-hero-warning-glow();
+    }
+    .bevel {
+      box-shadow: btn-hero-warning-bevel();
+    }
+    .shadow {
+      box-shadow: btn-hero-shadow();
+    }
+  }
+
+  .success-container {
+    .gradient {
+      @include btn-hero-success-gradient();
+    }
+    .glow {
+      box-shadow: btn-hero-success-glow();
+    }
+    .bevel {
+      box-shadow: btn-hero-success-bevel();
+    }
+    .shadow {
+      box-shadow: btn-hero-shadow();
+    }
+  }
+
+  .info-container {
+    .gradient {
+      @include btn-hero-info-gradient();
+    }
+    .glow {
+      box-shadow: btn-hero-info-glow();
+    }
+    .bevel {
+      box-shadow: btn-hero-info-bevel();
+    }
+    .shadow {
+      box-shadow: btn-hero-shadow();
+    }
+  }
+
+  .danger-container {
+    .gradient {
+      @include btn-hero-danger-gradient();
+    }
+    .glow {
+      box-shadow: btn-hero-danger-glow();
+    }
+    .bevel {
+      box-shadow: btn-hero-danger-bevel();
+    }
+    .shadow {
+      box-shadow: btn-hero-shadow();
+    }
+  }
+
+  .secondary-container {
+    .border {
+      color: nga-theme(btn-secondary-color);
+      border: nga-theme(btn-secondary-border-width) solid nga-theme(btn-secondary-border);
+    }
+    .glow {
+      box-shadow: btn-hero-secondary-glow();
+    }
+    .bevel {
+      box-shadow: btn-hero-secondary-bevel();
+    }
+    .shadow {
+      box-shadow: btn-hero-shadow();
+    }
+  }
+}
diff --git a/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.ts b/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.ts
index 18e9566a..2f94cca2 100644
--- a/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.ts
+++ b/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ngx-hero-buttons',
+  styleUrls: ['./hero-buttons.component.scss'],
   templateUrl: './hero-buttons.component.html',
 })
 export class HeroButtonComponent {