diff --git a/demo/src/app/components/+accordion/demos/custom-html/custom-html.html b/demo/src/app/components/+accordion/demos/custom-html/custom-html.html
index 555cf9cca3..10fae8b438 100644
--- a/demo/src/app/components/+accordion/demos/custom-html/custom-html.html
+++ b/demo/src/app/components/+accordion/demos/custom-html/custom-html.html
@@ -1,15 +1,15 @@
 <accordion>
   <accordion-group>
-    <div accordion-heading class="clearfix">
-      I can have markup!
+    <button class="btn btn-link btn-block clearfix" accordion-heading>
+      <div class="pull-left float-left">I can have markup!</div>
       <span class="badge badge-secondary float-right pull-right">Some HTML here</span>
-    </div>
+    </button>
     This is just some content to illustrate fancy headings.
   </accordion-group>
   <accordion-group>
-    <div accordion-heading>
+    <button class="btn btn-link" accordion-heading>
       I can have markup, too!
-    </div>
+    </button>
     <span class="badge badge-secondary center">And some HTML here</span>
   </accordion-group>
 </accordion>
diff --git a/src/accordion/accordion-group.component.html b/src/accordion/accordion-group.component.html
index e653c4c85d..dfa1b8041e 100644
--- a/src/accordion/accordion-group.component.html
+++ b/src/accordion/accordion-group.component.html
@@ -4,9 +4,9 @@
     <div class="panel-title">
       <div role="button" class="accordion-toggle"
            [attr.aria-expanded]="isOpen">
-        <div *ngIf="heading" [ngClass]="{'text-muted': isDisabled}">
+        <button class="btn btn-link" *ngIf="heading" [ngClass]="{'text-muted': isDisabled}">
           {{ heading }}
-        </div>
+        </button>
         <ng-content select="[accordion-heading]"></ng-content>
       </div>
     </div>