<!--
    Copyright (c) 2017
    @author:        Sean Denny
    @description:   Fluent Design Custom Elements by SD
    @license:       MIT
    @source:        https://github.com/Nektro/custom-elements/tree/master/fl
-->
<!--
    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() {
        const doc = document.currentScript.ownerDocument;
        customElements.define('fl-button', class FLButtonElement extends HTMLElement {
            constructor() {
                super();
                let label = this.innerHTML;
                this.innerHTML = `<button>${label}</button>`;
            }
        })
    })();
</script>

<!--
    Copyright (c) 2017
    @author:        Sean Denny
    @description:   Fluent Design Custom Elements by SD
    @license:       MIT
    @source:        https://github.com/Nektro/custom-elements/tree/master/fl
-->
<!--
    https://docs.microsoft.com/en-us/windows/uwp/controls-and-patterns/buttons
-->
<style>
    fl-button button {
        display: block;
        border: 2px solid transparent;
        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 {
        border: 2px solid #7f7f7f;
    }
    fl-button button:active {
        background-color: #7f7f7f;
    }
</style>
<script>
    (function() {
        const doc = document.currentScript.ownerDocument;
        customElements.define('fl-button', class FLButtonElement extends HTMLElement {
            constructor() {
                super();
                let label = this.innerHTML;
                this.innerHTML = `<button>${label}</button>`;
            }
        })
    })();
</script>

Fix jittering in FL Button from weird margin
Fix jittering in FL Button from weird margin

