square button html
<html>
<head>
<style>
/* This variable is just to show the you have to
put the same value for width and height, other wise
it won't be square. You don't actually need the var*/
:root { --size-1: 100px }
.square { width: var(--size-1); height: var(--size-1);
</style>
</head>
<body>
<button class="square"></button>
</body>
</html>