docs(aio): fix the css of the heroes component's buttons (#22333)

Fixes #22222

PR Close #22333

aio/content/examples/toh-pt6/e2e/app.e2e-spec.ts

@@ -190,6 +190,29 @@ describe('Tutorial part 6', () => {
       const maxId = heroesBefore[heroesBefore.length - 1].id;
       expect(heroesAfter[numHeroes]).toEqual({id: maxId + 1, name: newHeroName});
     });
+
+    it('displays correctly styled buttons', async () => {
+      element.all(by.buttonText('x')).then(buttons => {
+        for (const button of buttons) {
+          // Inherited styles from styles.css
+          expect(button.getCssValue('font-family')).toBe('Arial');
+          expect(button.getCssValue('border')).toContain('none');
+          expect(button.getCssValue('padding')).toBe('5px 10px');
+          expect(button.getCssValue('border-radius')).toBe('4px');
+          // Styles defined in heroes.component.css
+          expect(button.getCssValue('left')).toBe('194px');
+          expect(button.getCssValue('top')).toBe('-32px');
+        }
+      });
+
+      const addButton = element(by.buttonText('add'));
+      // Inherited styles from styles.css
+      expect(addButton.getCssValue('font-family')).toBe('Arial');
+      expect(addButton.getCssValue('border')).toContain('none');
+      expect(addButton.getCssValue('padding')).toBe('5px 10px');
+      expect(addButton.getCssValue('border-radius')).toBe('4px');
+    });
+
   });
 
   describe('Progressive hero search', () => {

aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css

@@ -51,7 +51,7 @@
 }
 
 /* #docregion additions */
-.button {
+button {
   background-color: #eee;
   border: none;
   padding: 5px 10px;