Creating a button with non-activating borders
Starting from the above structure with your SVG images inside the button, clear out all of the styles on your existing button code. They will only get in your way and make progress harder.
Set the player to have the black background, and give it the desired width.
The red border
Give the buttonBorder a red border.
border: 3px solid red;
Set its width:
And center it:
margin: 0 auto;
Refine the spacing
The button is slightly too long.
While it's possible to set the height, we can use developer tools to investigate and find out why the button is too long. The red bordered buttonBorder element is longer than the orange svg element.
This problem is caused by whitespace after the svg element. For further details, the gap is caused by the browser leaving extra descender space that text uses for lowercase j, g, and other characters that descend below the line.
It is possible to fix this by deleting all whitespace in the HTML after the closing tags, including newlines, but that makes it more difficult for us developers to read and understand the code.
Instead, a better solution when text isn't shown, is to set the font size to zero. Inside of the border and the nested button we can have no whitespace shown on the screen, and the whitespace won't badly affect what's shown on the screen.
And it's all done. You can change the size of the background area, and the button remains fixed in the center of it with neither the background nor the red border activating the button click event, as is intended for this example.
Making the button clickable
Speaking of clickable, one last thing to do is to set the mouse pointer when mousing on to the button.
You already have scripting code that handles mouse clicks on the button, and the mouse pointer now helps to inform people that they can interact with the button.