diff --git a/lib/components/hero-progress-button.html b/lib/components/hero-progress-button.html
index 37ae8eec..89d78ea8 100644
--- a/lib/components/hero-progress-button.html
+++ b/lib/components/hero-progress-button.html
@@ -5,7 +5,7 @@
 <dom-module id="hero-progress-button">
   <template>
     <style>
-      :host:not([percentage="0"]) {
+      :host[active="true"] {
         pointer-events: none;
       }
 
@@ -39,6 +39,9 @@
     Polymer({
       is: 'hero-progress-button',
       properties: {
+        active: {
+          type: Boolean
+        },
         disabled: {
           type: String
         },
diff --git a/lib/index.html b/lib/index.html
index 151b2b50..1f7eea1b 100644
--- a/lib/index.html
+++ b/lib/index.html
@@ -78,7 +78,7 @@
               <hero-badge class="block space-vertical-medium" ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()">3</hero-badge>
 
               <div class="space-vertical-large">
-                <hero-progress-button percentage="{{ app.state.progress }}" active="{{ app.writer.isBurning() }}"
+                <hero-progress-button percentage="{{ app.state.progress }}" ng-attr-active="{{ app.writer.isBurning() }}"
                   ng-click="app.burn(app.selection.getImage(), app.selection.getDrive())"
                   ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()">
                     <span ng-show="app.state.progress == 100 && app.writer.isBurning()">Finishing...</span>