diff --git a/packages/core/src/components/alert/alert.tsx b/packages/core/src/components/alert/alert.tsx
index 7361f45576..32adf1bdce 100644
--- a/packages/core/src/components/alert/alert.tsx
+++ b/packages/core/src/components/alert/alert.tsx
@@ -241,9 +241,10 @@ export class Alert {
   }
 
   buttonClass(button: AlertButton): CssClassMap {
+    let customClass = button.cssClass.split(' ').filter(b => b.trim() !== '').join(' ');
     let buttonClass: string[] = !button.cssClass
-      ? ['alert-button']
-      : [`alert-button`, `${button.cssClass}`];
+      ? ['alert-button', customClass]
+      : [`alert-button`, `${button.cssClass}`, customClass];
 
     return buttonClass.reduce((prevValue: any, cssClass: any) => {
       prevValue[cssClass] = true;
@@ -330,6 +331,13 @@ export class Alert {
     const subHdrId = `${this.alertId}-sub-hdr`;
     const msgId = `${this.alertId}-msg`;
 
+    if (this.cssClass) {
+      this.cssClass.split(' ').forEach(cssClass => {
+        if (cssClass.trim() !== '') this.el.classList.add(cssClass);
+      });
+    }
+
+
     if (this.title || !this.subTitle) {
       this.hdrId = hdrId;
 
diff --git a/packages/core/src/components/alert/test/basic/index.html b/packages/core/src/components/alert/test/basic/index.html
index 1a9f92b98c..9675446533 100644
--- a/packages/core/src/components/alert/test/basic/index.html
+++ b/packages/core/src/components/alert/test/basic/index.html
@@ -28,6 +28,7 @@
         <ion-button expand="block" onclick="presentAlertPrompt()">Prompt</ion-button>
         <ion-button expand="block" onclick="presentAlertRadio()">Radio</ion-button>
         <ion-button expand="block" onclick="presentAlertCheckbox()">Checkbox</ion-button>
+        <ion-button expand="block" onclick="presentWithCssClass()">CssClass</ion-button>
       </ion-content>
     </ion-page>
   </ion-app>
@@ -289,8 +290,26 @@
       return await alert.present();
     }
 
+    async function presentWithCssClass() {
+      var alertController = document.querySelector('ion-alert-controller');
+      await alertController.componentOnReady();
+      const alert = await alertController.create({
+        title: 'Alert',
+        subTitle: 'Subtitle',
+        cssClass: 'my-class my-customClass   ',
+        message: 'This is an alert message.',
+        buttons: [ {
+            text: 'Ok',
+            cssClass: 'my-class my-customClass   ',
+            handler: () => {
+              console.log('Confirm Ok')
+            }
+          }]
+      });
+      return await alert.present();
+    }
 
 </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>