你可以使用CSS来解决这个问题。你可以将按钮的宽度和高度都设置为相同的数值，这样按钮就会保持正方形的形状。同时，你可以使用百分比来设置按钮的高度，使其可以根据容器的大小自动调整。

下面是一个示例代码：

HTML:

  按钮

CSS:

.container {
  width: 200px; /* 设置容器的宽度 */
  height: 300px; /* 设置容器的高度 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.square-button {
  width: 100%; /* 设置按钮的宽度为容器的宽度 */
  padding: 10px;
  background-color: #ccc;
  border: none;
  outline: none;
  font-size: 16px;
  height: auto; /* 设置按钮的高度为自适应 */
}

在这个示例中，容器的宽度被设置为200px，高度被设置为300px。按钮的宽度被设置为100%，这样它就会自动填充容器的宽度。按钮的高度被设置为auto，这样它就可以根据内容的大小进行调整。你可以根据需要调整容器和按钮的尺寸。