diff --git a/src/playerAssetList.json b/src/playerAssetList.json
index b77414fff..4d0b24918 100644
--- a/src/playerAssetList.json
+++ b/src/playerAssetList.json
@@ -13,6 +13,10 @@
         ]
     },
     "styles": {
-        "core": ["styles/h5p.css", "styles/h5p-confirmation-dialog.css"]
+        "core": [
+            "styles/h5p.css",
+            "styles/h5p-confirmation-dialog.css",
+            "styles/h5p-core-button.css"
+        ]
     }
 }
diff --git a/test/H5PPlayer.loadDependencies.test.ts b/test/H5PPlayer.loadDependencies.test.ts
index 88a56e0a5..293f9fb0b 100644
--- a/test/H5PPlayer.loadDependencies.test.ts
+++ b/test/H5PPlayer.loadDependencies.test.ts
@@ -53,7 +53,7 @@ describe('Loading dependencies', () => {
             .setRenderer((model) => model)
             .render(contentId, contentObject, h5pObject as any)
             .then((model) => {
-                expect((model as any).styles.slice(2)).toEqual([
+                expect((model as any).styles.slice(3)).toEqual([
                     '/h5p/libraries/Foo-4.2/foo1.css',
                     '/h5p/libraries/Foo-4.2/foo2.css',
                     '/h5p/libraries/Bar-2.1/bar.css'
@@ -126,7 +126,7 @@ describe('Loading dependencies', () => {
             .setRenderer((model) => model)
             .render(contentId, contentObject, h5pObject as any)
             .then((model) => {
-                expect((model as any).styles.slice(2)).toEqual([
+                expect((model as any).styles.slice(3)).toEqual([
                     '/h5p/libraries/Foo-4.2/foo1.css',
                     '/h5p/libraries/Foo-4.2/foo2.css',
                     '/h5p/libraries/Bar-2.1/bar.css'
@@ -206,7 +206,7 @@ describe('Loading dependencies', () => {
             .setRenderer((model) => model)
             .render(contentId, contentObject, h5pObject as any)
             .then((model) => {
-                expect((model as any).styles.slice(2)).toEqual([
+                expect((model as any).styles.slice(3)).toEqual([
                     '/h5p/libraries/Baz-3.3/baz.css',
                     '/h5p/libraries/Bar-2.1/bar.css',
                     '/h5p/libraries/Foo-4.2/foo.css'
@@ -279,7 +279,7 @@ describe('Loading dependencies', () => {
             .setRenderer((model) => model)
             .render(contentId, contentObject, h5pObject as any)
             .then((model) => {
-                expect((model as any).styles.slice(2)).toEqual([
+                expect((model as any).styles.slice(3)).toEqual([
                     '/h5p/libraries/Baz-3.3/baz.css',
                     '/h5p/libraries/Bar-2.1/bar.css',
                     '/h5p/libraries/Foo-4.2/foo.css'
@@ -356,7 +356,7 @@ describe('Loading dependencies', () => {
             .setRenderer((model) => model)
             .render(contentId, contentObject, h5pObject as any)
             .then((model) => {
-                expect((model as any).styles.slice(2)).toEqual([
+                expect((model as any).styles.slice(3)).toEqual([
                     '/h5p/libraries/Baz-3.3/baz.css',
                     '/h5p/libraries/Bar-2.1/bar.css',
                     '/h5p/libraries/Foo-4.2/foo.css'
@@ -460,6 +460,7 @@ describe('Loading dependencies', () => {
         expect(model.styles).toEqual([
             '/baseUrl/coreUrl/styles/h5p.css',
             '/baseUrl/coreUrl/styles/h5p-confirmation-dialog.css',
+            '/baseUrl/coreUrl/styles/h5p-core-button.css',
             '/baseUrl/libraryUrl/Baz-3.3/baz.css',
             '/baseUrl/libraryUrl/Bar-2.1/bar.css',
             '/baseUrl/libraryUrl/Foo-4.2/foo.css'
diff --git a/test/H5PPlayer.renderHtmlPage.test.ts b/test/H5PPlayer.renderHtmlPage.test.ts
index 057066537..89124cf98 100644
--- a/test/H5PPlayer.renderHtmlPage.test.ts
+++ b/test/H5PPlayer.renderHtmlPage.test.ts
@@ -21,6 +21,7 @@ describe('Rendering the HTML page', () => {
                     
                     <link rel="stylesheet" href="/h5p/core/styles/h5p.css"/>
                     <link rel="stylesheet" href="/h5p/core/styles/h5p-confirmation-dialog.css"/>
+                    <link rel="stylesheet" href="/h5p/core/styles/h5p-core-button.css"/>
                     <script src="/h5p/core/js/jquery.js"></script>
                     <script src="/h5p/core/js/h5p.js"></script>
                     <script src="/h5p/core/js/h5p-event-dispatcher.js"></script>
@@ -63,7 +64,8 @@ describe('Rendering the HTML page', () => {
                         ],
                         "styles":[
                         "/h5p/core/styles/h5p.css",
-                        "/h5p/core/styles/h5p-confirmation-dialog.css"
+                        "/h5p/core/styles/h5p-confirmation-dialog.css",
+                        "/h5p/core/styles/h5p-core-button.css"
                         ]
                     }
                   },
@@ -81,7 +83,8 @@ describe('Rendering the HTML page', () => {
                     ],
                     "styles":[
                     "/h5p/core/styles/h5p.css",
-                    "/h5p/core/styles/h5p-confirmation-dialog.css"
+                    "/h5p/core/styles/h5p-confirmation-dialog.css",
+                    "/h5p/core/styles/h5p-core-button.css"
                     ]
                     },
                   "l10n": {
@@ -275,6 +278,7 @@ describe('Rendering the HTML page', () => {
                         
                         <link rel="stylesheet" href="/h5p/core/styles/h5p.css"/>
                         <link rel="stylesheet" href="/h5p/core/styles/h5p-confirmation-dialog.css"/>
+                        <link rel="stylesheet" href="/h5p/core/styles/h5p-core-button.css"/>
                         <script src="/h5p/core/js/jquery.js"></script>
                         <script src="/h5p/core/js/h5p.js"></script>
                         <script src="/h5p/core/js/h5p-event-dispatcher.js"></script>
@@ -319,7 +323,8 @@ describe('Rendering the HTML page', () => {
                           ],
                           "styles":[
                           "/h5p/core/styles/h5p.css",
-                          "/h5p/core/styles/h5p-confirmation-dialog.css"
+                          "/h5p/core/styles/h5p-confirmation-dialog.css",
+                          "/h5p/core/styles/h5p-core-button.css"
                           ]
                         }
                       },
@@ -338,7 +343,8 @@ describe('Rendering the HTML page', () => {
                           ],
                           "styles":[
                           "/h5p/core/styles/h5p.css",
-                          "/h5p/core/styles/h5p-confirmation-dialog.css"
+                          "/h5p/core/styles/h5p-confirmation-dialog.css",
+                          "/h5p/core/styles/h5p-core-button.css"
                           ]
                           },
                       "l10n": {