Edit in JSFiddle

<mega-button title="Click me!" onclick="this.title='Clicked'"></mega-button>

document.registerElement('mega-button', {
    prototype: Object.create(HTMLButtonElement.prototype, {
        createdCallback: {
            value: function() { 
                alert("Mega button is declared"); 
            }
        },
        attachedCallback: {
            value: function() {
                alert("Mega button rendered into " + this.parentElement);
            }
        },
        detachedCallback: {
            value: function() {
                alert("Mega button is out from dom");
            }
        },
        attributeChangedCallback: {
            value: function(attr, before, after) {
                alert("Changed " + attr + " from: " + before + " to: " + after);
            }
        }
    })
});

body {
    padding: 50px;
}

mega-button {
    border: 5px solid gray;
    border-radius: 5px;
    padding: 15px;
    font-size: 40pt;
    font-family: Impact;
    cursor: pointer;
    color: white;
    background: red;
}

mega-button:before {
    content: attr(title);
}

mega-button:hover { background: pink; }