diff --git a/projects/ngx-tour-guide/src/lib/action/action.component.html b/projects/ngx-tour-guide/src/lib/action/action.component.html
index c175753..809b682 100644
--- a/projects/ngx-tour-guide/src/lib/action/action.component.html
+++ b/projects/ngx-tour-guide/src/lib/action/action.component.html
@@ -1,10 +1,11 @@
-<button
-  [hidden]="action?.hidden"
-  [attr.ngx-tour-guide-button]="actionKey"
-  (click)="tourGuideService.executeAction(actionKey)"
->
-  <ng-content> </ng-content>
-  <label *ngIf="action?.label as label">
-    {{ label }}
-  </label>
-</button>
+<div [hidden]="action?.hidden">
+  <div #customActionContent><ng-content></ng-content></div>
+
+  <button
+    *ngIf="!customActionContent.children.length && action?.label"
+    [class]="action?.buttonClasses"
+    (click)="tourGuideService.executeAction(actionKey)"
+  >
+    <label>{{ action?.label }}</label>
+  </button>
+</div>
diff --git a/projects/ngx-tour-guide/src/lib/models/tour-guide-actions.model.ts b/projects/ngx-tour-guide/src/lib/models/tour-guide-actions.model.ts
index dd74ae8..71f34d9 100644
--- a/projects/ngx-tour-guide/src/lib/models/tour-guide-actions.model.ts
+++ b/projects/ngx-tour-guide/src/lib/models/tour-guide-actions.model.ts
@@ -28,9 +28,9 @@ export interface TourGuideAction {
     label?: string;
 
     /**
-     * Optionl change of the actions icon
+     * Optional classes that will be applied for on the button
      */
-    icon?: string;
+    buttonClasses?: string[];
 
     /**
      * Callback before the action is executed
diff --git a/projects/showcase/src/app/app.component.html b/projects/showcase/src/app/app.component.html
index 9017cb5..5aabf86 100644
--- a/projects/showcase/src/app/app.component.html
+++ b/projects/showcase/src/app/app.component.html
@@ -896,8 +896,38 @@ <h2>Next Steps</h2>
 <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
 
 <shipbit-ngx-tour-guide>
-  <span class="material-icons md-18" ngxTourGuidePreviousContent >arrow_back</span>
-  <span class="material-icons md-18" ngxTourGuideNextContent >arrow_forward</span>
-  <span class="material-icons md-18" ngxTourGuideFinishContent >check</span>
-  <span class="material-icons md-18" ngxTourGuideSkipContent >close</span>
+  <button
+    ngxTourGuidePreviousContent
+    class="ngx-tourguide--button"
+    (click)="this.tourGuideService.executeAction('previousStop')"
+  >
+    <span class="material-icons md-18">arrow_back</span>
+    <label>Zurück</label>
+  </button>
+
+  <button
+    ngxTourGuideNextContent
+    class="ngx-tourguide--button"
+    (click)="this.tourGuideService.executeAction('nextStop')"
+  >
+    <span class="material-icons md-18">arrow_forward</span>
+    <label>Weiter</label>
+  </button>
+
+  <button
+    ngxTourGuideFinishContent
+    class="ngx-tourguide--button"
+    (click)="this.tourGuideService.executeAction('finishTour')"
+  >
+    <span class="material-icons md-18">check</span>
+    <label>Aschließen</label>
+  </button>
+
+  <button
+    ngxTourGuideSkipContent
+    class="ngx-tourguide--button"
+    (click)="this.tourGuideService.executeAction('skipTour')"
+  >
+    <span class="material-icons md-18">close</span>
+  </button>
 </shipbit-ngx-tour-guide>
diff --git a/projects/showcase/src/app/app.component.ts b/projects/showcase/src/app/app.component.ts
index 17716b7..d9d3a32 100644
--- a/projects/showcase/src/app/app.component.ts
+++ b/projects/showcase/src/app/app.component.ts
@@ -9,7 +9,7 @@ import { NgxTourGuideService } from '@shipbit/ngx-tour-guide';
 export class AppComponent {
   title = 'showcase';
 
-  constructor(tourGuideService: NgxTourGuideService) {
+  constructor(public tourGuideService: NgxTourGuideService) {
     tourGuideService.start({
       stops: [
         {
@@ -25,14 +25,24 @@ export class AppComponent {
         {
           element: '.card-container',
           title: 'Find resources here',
-          content: 'These are resources helping you to get started with angular development.'
-        }
+          content:
+            'These are resources helping you to get started with angular development.',
+        },
       ],
       actions: {
-        finishTour: { label: 'Abschließen'},
-        previousStop: { label: 'Zurück'},
-        nextStop: { label: 'Weiter'}
-      }
+        previousStop: {
+          label: 'Zurück',
+          buttonClasses: ['ngx-tourguide--button'],
+        },
+        nextStop: {
+          label: 'Weiter',
+          buttonClasses: ['ngx-tourguide--button'],
+        },
+        finishTour: {
+          label: 'Abschließen',
+          buttonClasses: ['ngx-tourguide--button'],
+        },
+      },
     });
   }
 }
diff --git a/projects/showcase/src/styles.scss b/projects/showcase/src/styles.scss
index f09b8c2..37d87fd 100644
--- a/projects/showcase/src/styles.scss
+++ b/projects/showcase/src/styles.scss
@@ -1,74 +1,76 @@
 /* You can add global styles to this file, and also import other style files */
 @import "~@angular/cdk/overlay-prebuilt.css";
 
-.ngx-tour-guide {
-    .tour-guide-container[ngxTourGuidecontainer] {
-        padding: 1rem;
-        border: none;
-        border-radius: 0.5rem;
-        background: #f1f3f7;
-        color: #7b8ab8;
-        box-shadow: 0px 0px 25px rgb(255 255 255 / 40%);
-    }
+.ngx-tourguide--button {
+  color: #7b8ab8;
+  background-color: #d9e3f1;
+  border: none;
+  border-radius: 0.5rem 0;
+  display: flex;
+  align-items: center;
+  padding: 0.25rem;
 
-    .tour-guide--overlay[ngxTourGuideOverlay] {
-        background-color: hsla(189deg, 62%, 4%, 0.75);
-        backdrop-filter: none;
-    }
+  &:focus {
+    outline: none;
+    border: 1px solid #296abd;
+  }
 
-    .tour-guide-stop[ngxTourGuideStop] {
-        .stop-title {
-            color: #8E7BBE;
-            text-transform: uppercase;
-            text-shadow: 0px 0px 4px #7bacbe;
-            padding-bottom: .25rem;
-            position: relative;
-            font-size: 1.5rem;
-            font-weight: 400;
-            letter-spacing: 2px;
-            margin-bottom: 1rem;
+  &:hover,
+  &:active {
+    color: #fff;
+    background-color: #2c71ca;
+  }
 
-            &::after {
-                content: "";
-                height: 1px;
-                position: absolute;
-                bottom: 0;
-                left: 0;
-                right: 0;
-                background: #8E7BBE;
-            }
-        }
+  &:active {
+    border-color: transparent;
+    box-shadow: inset 2px 3px 6px rgb(0 0 0 / 20%),
+      inset -3px -2px 6px rgb(255 255 255 / 20%);
+  }
+}
 
-        .stop-counter {
-            color: #95a1ca;
-            [index] {
-                color: #8E7BBE;
-            }
-        }
-    }
+.ngx-tour-guide {
+  .tour-guide-container[ngxTourGuidecontainer] {
+    padding: 1rem;
+    border: none;
+    border-radius: 0.5rem;
+    background: #f1f3f7;
+    color: #7b8ab8;
+    box-shadow: 0px 0px 25px rgb(255 255 255 / 40%);
+  }
 
-    button {
-        color: #7b8ab8;
-        background-color: #d9e3f1;
-        border: none;
-        border-radius: .5rem 0;
-        display: flex;
-        align-items: center;
+  .tour-guide--overlay[ngxTourGuideOverlay] {
+    background-color: hsla(189deg, 62%, 4%, 0.75);
+    backdrop-filter: none;
+  }
 
-        &:focus {
-            outline: none;
-            border: 1px solid #296abd;
-        }
+  .tour-guide-stop[ngxTourGuideStop] {
+    .stop-title {
+      color: #8e7bbe;
+      text-transform: uppercase;
+      text-shadow: 0px 0px 4px #7bacbe;
+      padding-bottom: 0.25rem;
+      position: relative;
+      font-size: 1.5rem;
+      font-weight: 400;
+      letter-spacing: 2px;
+      margin-bottom: 1rem;
 
-        &:hover,
-        &:active {
-            color: #fff;
-            background-color: #2c71ca;
-        }
+      &::after {
+        content: "";
+        height: 1px;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: #8e7bbe;
+      }
+    }
 
-        &:active {
-            border-color: transparent;
-            box-shadow: inset 2px 3px 6px rgb(0 0 0 / 20%), inset -3px -2px 6px rgb(255 255 255 / 20%);
-        }
+    .stop-counter {
+      color: #95a1ca;
+      [index] {
+        color: #8e7bbe;
+      }
     }
+  }
 }