Edit in JSFiddle

<!-- This part may be declared in import (megaButton.html) -->
<template id="mega-button-template">
    <div class="content">
        <h1 class="header">Mega button!</h1>
        <img src="https://lh6.ggpht.com/3b34N0j2xxM-8w0mS29bFJFvoRsdnmJE4bpHFbri5zQ_TWQNNJeqriCtTme1OG54xw=w300" width="100px" />
    </div>
</template>

<!-- index.html content -->
<mega-button title="Hi button"></mega-button>
<mega-button title="Hello button"></mega-button>

document.registerElement('mega-button', {
    prototype: Object.create(HTMLButtonElement.prototype, {
        attachedCallback: {
            value: function () {
                var template = document.getElementById("mega-button-template");
                var content = template.content.cloneNode(true);
                content.querySelector('.header').innerText = this.getAttribute('title');
                this.appendChild(content);
            }
        },
    })
});

body {
    padding: 50px;
}
.content {
    border: 5px solid gray;
    border-radius: 5px;
    padding: 15px;
    font-size: 10pt;
    font-family: Impact;
    cursor: pointer;
    color: white;
    background: red;
    text-align: center;
    margin: 25px;
    width: 300px;
}