diff --git a/gallery/src/demos/demo-hui-entity-button-card.ts b/gallery/src/demos/demo-hui-button-card.ts
similarity index 75%
rename from gallery/src/demos/demo-hui-entity-button-card.ts
rename to gallery/src/demos/demo-hui-button-card.ts
index 1b201734a4f0..f2a9a4cad53f 100644
--- a/gallery/src/demos/demo-hui-entity-button-card.ts
+++ b/gallery/src/demos/demo-hui-button-card.ts
@@ -15,60 +15,55 @@ const CONFIGS = [
   {
     heading: "Basic example",
     config: `
-- type: entity-button
+- type: button
   entity: light.bed_light
     `,
   },
   {
     heading: "With Name",
     config: `
-- type: entity-button
-  name: Bedroom
+- type: button
+  title: Bedroom
   entity: light.bed_light
     `,
   },
   {
     heading: "With Icon",
     config: `
-- type: entity-button
+- type: button
   entity: light.bed_light
   icon: mdi:hotel
     `,
   },
-  {
-    heading: "Without State",
-    config: `
-- type: entity-button
-  entity: light.bed_light
-  show_state: false
-    `,
-  },
   {
     heading: "Custom Tap Action (toggle)",
     config: `
-- type: entity-button
+- type: button
   entity: light.bed_light
-  tap_action: toggle
+  tap_action:
+    action: toggle
     `,
   },
   {
     heading: "Running Service",
     config: `
-- type: entity-button
+- type: button
   entity: light.bed_light
-  service: light.toggle
+  tap_action:
+    type: call-service
+    service: light.toggle
     `,
   },
   {
     heading: "Invalid Entity",
     config: `
-- type: entity-button
+- type: button
   entity: sensor.invalid_entity
     `,
   },
 ];
 
-class DemoEntityButtonEntity extends PolymerElement {
+class DemoButtonCard extends PolymerElement {
   static get template() {
     return html`
       <demo-cards
@@ -96,4 +91,4 @@ class DemoEntityButtonEntity extends PolymerElement {
   }
 }
 
-customElements.define("demo-hui-entity-button-card", DemoEntityButtonEntity);
+customElements.define("demo-hui-button-card", DemoButtonCard);
diff --git a/gallery/src/demos/demo-hui-picture-elements-card.ts b/gallery/src/demos/demo-hui-picture-elements-card.ts
index 53cb27f585f3..2f545aa18151 100644
--- a/gallery/src/demos/demo-hui-picture-elements-card.ts
+++ b/gallery/src/demos/demo-hui-picture-elements-card.ts
@@ -34,15 +34,17 @@ const CONFIGS = [
 - type: picture-elements
   image: /images/floorplan.png
   elements:
-    - type: service-button
+    - type: button
       title: Lights Off
       style:
         top: 97%
         left: 90%
         padding: 0px
-      service: light.turn_off
-      service_data:
-        entity_id: group.all_lights
+      tap_action:
+        type: call-service
+        service: light.turn_off
+        service_data:
+          entity_id: group.all_lights
     - type: icon
       icon: mdi:cctv
       entity: camera.demo_camera
diff --git a/src/panels/lovelace/cards/hui-button-card.ts b/src/panels/lovelace/cards/hui-button-card.ts
new file mode 100644
index 000000000000..eb0fec19ed1e
--- /dev/null
+++ b/src/panels/lovelace/cards/hui-button-card.ts
@@ -0,0 +1,73 @@
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+
+import "../../../components/ha-card";
+
+import createHuiElement from "../common/create-hui-element";
+import { HomeAssistant } from "../../../types";
+import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
+import { LovelaceCard } from "../types";
+import { LovelaceCardConfig, ActionConfig } from "../../../data/lovelace";
+import { LovelaceElement } from "../elements/types";
+
+interface Config extends LovelaceCardConfig {
+  entity: string;
+  title?: string;
+  icon?: string;
+  theme?: string;
+  tap_action?: ActionConfig;
+  hold_action?: ActionConfig;
+}
+
+class HuiButtonCard extends hassLocalizeLitMixin(LitElement)
+  implements LovelaceCard {
+  private _hass?: HomeAssistant;
+  private _config?: Config;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      hass: {},
+      _config: {},
+    };
+  }
+
+  set hass(hass: HomeAssistant) {
+    this._hass = hass;
+    for (const el of this.shadowRoot!.querySelectorAll("hui-button-element")) {
+      const element = el as LovelaceElement;
+      element.hass = this._hass;
+    }
+  }
+
+  public getCardSize(): number {
+    return 2;
+  }
+
+  public setConfig(config: Config): void {
+    this._config = { theme: "default", ...config };
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config || !this._hass) {
+      return html``;
+    }
+
+    const element = createHuiElement({
+      type: "hui-button-element",
+      ...this._config,
+    }) as LovelaceElement;
+    element.hass = this._hass;
+
+    return html`
+      <ha-card> ${element} </ha-card>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-button-card": HuiButtonCard;
+  }
+}
+
+customElements.define("hui-button-card", HuiButtonCard);
diff --git a/src/panels/lovelace/common/create-card-element.js b/src/panels/lovelace/common/create-card-element.js
index 60ff05659f6a..a1bab42933ea 100644
--- a/src/panels/lovelace/common/create-card-element.js
+++ b/src/panels/lovelace/common/create-card-element.js
@@ -1,9 +1,9 @@
 import { fireEvent } from "../../../common/dom/fire_event";
 
 import "../cards/hui-alarm-panel-card";
+import "../cards/hui-button-card";
 import "../cards/hui-conditional-card";
 import "../cards/hui-entities-card";
-import "../cards/hui-entity-button-card";
 import "../cards/hui-entity-filter-card";
 import "../cards/hui-error-card";
 import "../cards/hui-glance-card";
@@ -30,9 +30,9 @@ import createErrorCardConfig from "./create-error-card-config";
 
 const CARD_TYPES = new Set([
   "alarm-panel",
+  "button",
   "conditional",
   "entities",
-  "entity-button",
   "entity-filter",
   "error",
   "gauge",
diff --git a/src/panels/lovelace/common/create-hui-element.js b/src/panels/lovelace/common/create-hui-element.js
index c9d10924dbb6..bfd7e309e5fc 100644
--- a/src/panels/lovelace/common/create-hui-element.js
+++ b/src/panels/lovelace/common/create-hui-element.js
@@ -1,6 +1,6 @@
+import "../elements/hui-button-element";
 import "../elements/hui-icon-element";
 import "../elements/hui-image-element";
-import "../elements/hui-service-button-element";
 import "../elements/hui-state-badge-element";
 import "../elements/hui-state-icon-element";
 import "../elements/hui-state-label-element";
@@ -10,9 +10,9 @@ import createErrorCardConfig from "./create-error-card-config";
 
 const CUSTOM_TYPE_PREFIX = "custom:";
 const ELEMENT_TYPES = new Set([
+  "button",
   "icon",
   "image",
-  "service-button",
   "state-badge",
   "state-icon",
   "state-label",
diff --git a/src/panels/lovelace/cards/hui-entity-button-card.ts b/src/panels/lovelace/elements/hui-button-element.ts
similarity index 55%
rename from src/panels/lovelace/cards/hui-entity-button-card.ts
rename to src/panels/lovelace/elements/hui-button-element.ts
index fbb074b0b43c..db33804bd75f 100644
--- a/src/panels/lovelace/cards/hui-entity-button-card.ts
+++ b/src/panels/lovelace/elements/hui-button-element.ts
@@ -1,117 +1,92 @@
-import {
-  html,
-  LitElement,
-  PropertyDeclarations,
-  PropertyValues,
-} from "@polymer/lit-element";
-import { HassEntity } from "home-assistant-js-websocket";
+import { html, LitElement, PropertyValues } from "@polymer/lit-element";
 import { TemplateResult } from "lit-html";
 import { styleMap } from "lit-html/directives/styleMap";
+import "@polymer/paper-button/paper-button";
 
-import "../../../components/ha-card";
+import "../../../components/ha-icon";
+import "../entity-rows/hui-error-entity-row";
 
-import isValidEntityId from "../../../common/entity/valid_entity_id";
+import { LovelaceElement, LovelaceElementConfig } from "./types";
+import { HomeAssistant, LightEntity } from "../../../types";
+import { handleClick } from "../common/handle-click";
+import { longPress } from "../common/directives/long-press-directive";
+import { HassEntity } from "home-assistant-js-websocket";
+import computeStateName from "../../../common/entity/compute_state_name";
 import stateIcon from "../../../common/entity/state_icon";
 import computeStateDomain from "../../../common/entity/compute_state_domain";
-import computeStateName from "../../../common/entity/compute_state_name";
 import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
-import { HomeAssistant, LightEntity } from "../../../types";
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
-import { LovelaceCard } from "../types";
-import { LovelaceCardConfig, ActionConfig } from "../../../data/lovelace";
-import { longPress } from "../common/directives/long-press-directive";
-import { handleClick } from "../common/handle-click";
-
-interface Config extends LovelaceCardConfig {
-  entity: string;
-  name?: string;
-  icon?: string;
-  theme?: string;
-  tap_action?: ActionConfig;
-  hold_action?: ActionConfig;
-}
+import isValidEntityId from "../../../common/entity/valid_entity_id";
 
-class HuiEntityButtonCard extends hassLocalizeLitMixin(LitElement)
-  implements LovelaceCard {
+export class HuiButtonElement extends LitElement implements LovelaceElement {
   public hass?: HomeAssistant;
-  private _config?: Config;
+  private _config?: LovelaceElementConfig;
 
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      _config: {},
-    };
+  static get properties() {
+    return { hass: {}, _config: {} };
   }
 
-  public getCardSize(): number {
-    return 2;
-  }
+  public setConfig(config: LovelaceElementConfig): void {
+    if (!config) {
+      throw Error("Invalid Configuration");
+    }
 
-  public setConfig(config: Config): void {
-    if (!isValidEntityId(config.entity)) {
+    if (config.entity && !isValidEntityId(config.entity)) {
       throw new Error("Invalid Entity");
     }
 
     this._config = { theme: "default", ...config };
   }
 
-  protected shouldUpdate(changedProps: PropertyValues): boolean {
-    if (changedProps.has("_config")) {
-      return true;
+  protected render(): TemplateResult {
+    if (!this.hass || !this._config) {
+      return html``;
     }
 
-    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-    if (oldHass) {
-      return (
-        oldHass.states[this._config!.entity] !==
-        this.hass!.states[this._config!.entity]
-      );
-    }
-    return true;
-  }
+    const stateObj = this._config.entity
+      ? this.hass.states[this._config.entity]
+      : undefined;
 
-  protected render(): TemplateResult {
-    if (!this._config || !this.hass) {
-      return html``;
+    if (this._config.entity && !stateObj) {
+      return html`
+        <hui-error-entity-row
+          .entity="${this._config.entity}"
+        ></hui-error-entity-row>
+      `;
     }
-    const stateObj = this.hass.states[this._config.entity];
 
     return html`
       ${this.renderStyle()}
-      <ha-card
+      <paper-button
         @ha-click="${this._handleTap}"
         @ha-hold="${this._handleHold}"
         .longPress="${longPress()}"
       >
-        ${
-          !stateObj
-            ? html`
-                <div class="not-found">
-                  Entity not available: ${this._config.entity}
-                </div>
-              `
-            : html`
-                <paper-button>
-                  <div>
-                    <ha-icon
-                      data-domain="${computeStateDomain(stateObj)}"
-                      data-state="${stateObj.state}"
-                      .icon="${this._config.icon || stateIcon(stateObj)}"
-                      style="${
-                        styleMap({
-                          filter: this._computeBrightness(stateObj),
-                          color: this._computeColor(stateObj),
-                        })
-                      }"
-                    ></ha-icon>
-                    <span>
-                      ${this._config.name || computeStateName(stateObj)}
-                    </span>
-                  </div>
-                </paper-button>
-              `
-        }
-      </ha-card>
+        <div>
+          ${
+            stateObj
+              ? html`
+                  <ha-icon
+                    data-domain="${computeStateDomain(stateObj)}"
+                    data-state="${stateObj.state}"
+                    .icon="${this._config.icon || stateIcon(stateObj!)}"
+                    style="${
+                      styleMap({
+                        filter: this._computeBrightness(stateObj),
+                        color: this._computeColor(stateObj),
+                      })
+                    }"
+                  ></ha-icon>
+                  <span>
+                    ${this._config.title || computeStateName(stateObj!)}
+                  </span>
+                `
+              : html`
+                  <ha-icon .icon="${this._config.icon}"></ha-icon>
+                  <span>${this._config.title}</span>
+                `
+          }
+        </div>
+      </paper-button>
     `;
   }
 
@@ -155,11 +130,8 @@ class HuiEntityButtonCard extends hassLocalizeLitMixin(LitElement)
           display: flex;
           margin: auto;
           text-align: center;
-        }
-        .not-found {
-          flex: 1;
-          background-color: yellow;
-          padding: 8px;
+          white-space: nowrap;
+          color: var(--primary-color);
         }
       </style>
     `;
@@ -172,7 +144,6 @@ class HuiEntityButtonCard extends hassLocalizeLitMixin(LitElement)
     const brightness = stateObj.attributes.brightness;
     return `brightness(${(brightness + 245) / 5}%)`;
   }
-
   private _computeColor(stateObj: HassEntity | LightEntity): string {
     if (!stateObj.attributes.hs_color) {
       return "";
@@ -195,8 +166,8 @@ class HuiEntityButtonCard extends hassLocalizeLitMixin(LitElement)
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-entity-button-card": HuiEntityButtonCard;
+    "hui-button-element": HuiButtonElement;
   }
 }
 
-customElements.define("hui-entity-button-card", HuiEntityButtonCard);
+customElements.define("hui-button-element", HuiButtonElement);
diff --git a/src/panels/lovelace/elements/hui-service-button-element.ts b/src/panels/lovelace/elements/hui-service-button-element.ts
deleted file mode 100644
index 32a39600fe9d..000000000000
--- a/src/panels/lovelace/elements/hui-service-button-element.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { html, LitElement } from "@polymer/lit-element";
-import { TemplateResult } from "lit-html";
-
-import "../../../components/buttons/ha-call-service-button";
-
-import { LovelaceElement, LovelaceElementConfig } from "./types";
-import { HomeAssistant } from "../../../types";
-
-export class HuiServiceButtonElement extends LitElement
-  implements LovelaceElement {
-  public hass?: HomeAssistant;
-  private _config?: LovelaceElementConfig;
-  private _domain?: string;
-  private _service?: string;
-
-  static get properties() {
-    return { _config: {} };
-  }
-
-  public setConfig(config: LovelaceElementConfig): void {
-    if (!config || !config.service) {
-      throw Error("Invalid Configuration: 'service' required");
-    }
-
-    [this._domain, this._service] = config.service.split(".", 2);
-
-    if (!this._domain) {
-      throw Error("Invalid Configuration: 'service' does not have a domain");
-    }
-
-    if (!this._service) {
-      throw Error(
-        "Invalid Configuration: 'service' does not have a service name"
-      );
-    }
-
-    this._config = config;
-  }
-
-  protected render(): TemplateResult {
-    if (!this._config) {
-      return html``;
-    }
-
-    return html`
-      ${this.renderStyle()}
-      <ha-call-service-button
-        .hass="${this.hass}"
-        .domain="${this._domain}"
-        .service="${this._service}"
-        .service-data="${this._config.service_data}"
-        >${this._config.title}</ha-call-service-button
-      >
-    `;
-  }
-
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        ha-call-service-button {
-          color: var(--primary-color);
-          white-space: nowrap;
-        }
-      </style>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-service-button-element": HuiServiceButtonElement;
-  }
-}
-
-customElements.define("hui-service-button-element", HuiServiceButtonElement);
diff --git a/src/panels/lovelace/elements/types.ts b/src/panels/lovelace/elements/types.ts
index ebc66605d9ee..bfd3bb599b25 100644
--- a/src/panels/lovelace/elements/types.ts
+++ b/src/panels/lovelace/elements/types.ts
@@ -6,10 +6,10 @@ export interface LovelaceElementConfig {
   style: object;
   entity?: string;
   hold_action?: ActionConfig;
-  service?: string;
-  service_data?: object;
   tap_action?: ActionConfig;
   title?: string;
+  theme?: string;
+  icon?: string;
 }
 
 export interface LovelaceElement extends HTMLElement {