HTML Button Maker

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Button Maker</title>
<style>
.button{
    width:88px;
    height:31px;
    box-sizing:border-box;

    overflow:hidden;

    display:flex;
    justify-content:center;
    align-items:center;

    font-family:'MS Gothic', sans-serif; 
    font-weight:bold;
    font-size:22px;

    color:black;
    background:yellow;
    background-image:url();
    background-size: cover;
    background-position: center;
    border-left:5px solid red;
    border-bottom:5px solid blue;

    user-select:none;
}

.accent{color: red;} 
</style>
</head>
<body>
 

<div class="button" id="button">
    <span>88<span class="accent">x</span>31</span>
</div>

<br>

<button onclick="downloadButton()">
    download
</button>

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

<script>
function downloadButton() {
    html2canvas(document.getElementById("button"), {
        backgroundColor: null,
        width: 88,
        height: 31,
        scale: 4 
    }).then(canvas => {
        const link = document.createElement("a");
        link.download = "button.png";
        link.href = canvas.toDataURL();
        link.click();
    });
}
</script>
</body>
</html>
Editor is loading...