<!--
    https://docs.microsoft.com/en-us/windows/uwp/controls-and-patterns/buttons
-->
<style>
    fl-button button {
        display: inline-block;
        border: 0;
        background-color: #c2c2c2;
        padding: 5px 24px;
        margin: 2px;
        font-family: inherit;
        user-select: none;
        font-size: 18px;
        letter-spacing: -1px;
    }
    fl-button button:focus {
        outline: none;
    }
    fl-button button:hover {
        margin: 0px;
        border: 2px solid #7f7f7f;
    }
    fl-button button:active {
        background-color: #7f7f7f;
    }
</style>
<script>
    (function() {
        customElements.define('fl-button', class FLButtonElement extends HTMLElement {
            constructor() {
                super();
                // must use inner <button> becuase extending HTMLButtonElement throws Illegal Constructor
                // see https://bugs.chromium.org/p/chromium/issues/detail?id=648828
                this.appendChild(document.createElement('button'));
            }
            static get observedAttributes() {
                return ['content'];
            }
            attributeChangedCallback(attr, oV, nV) {
                if (attr === 'content') {
                    this.children[0].innerHTML = nV;
                }
            }
        })
    })();
</script>

<!--
    https://docs.microsoft.com/en-us/windows/uwp/controls-and-patterns/buttons
-->
<style>
    fl-button button {
        display: inline-block;
        border: 0;
        background-color: #cfcfcf;
        padding: 5px 24px;
        margin: 2px;
        font-family: inherit;
        user-select: none;
        font-size: 18px;
        letter-spacing: -1px;
    }
    fl-button button:focus {
        outline: none;
    }
    fl-button button:hover {
        margin: 0px;
        border: 2px solid #7f7f7f;
    }
    fl-button button:active {
        background-color: #7f7f7f;
    }
</style>
<script>
    (function() {
        customElements.define('fl-button', class FLButtonElement extends HTMLElement {
            constructor() {
                super();
                // must use inner <button> becuase extending HTMLButtonElement throws Illegal Constructor
                // see https://bugs.chromium.org/p/chromium/issues/detail?id=648828
                this.appendChild(document.createElement('button'));
            }
            static get observedAttributes() {
                return ['content'];
            }
            attributeChangedCallback(attr, oV, nV) {
                if (attr === 'content') {
                    this.children[0].innerHTML = nV;
                }
            }
        })
    })();
</script>

Update FL Button, make color consistent
Update FL Button, make color consistent

