如何在带有button元素的同一行上呈现个性化按钮组件

<div class="button-container">
  <button class="default-button">Default Button</button>
  <div class="custom-button">Custom Button</div>
</div>

.button-container {
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中对齐 */
}

.default-button {
  margin-right: 10px; /* 按钮之间的间距 */
}

.custom-button {
  padding: 10px 20px; /* 自定义按钮的内边距 */
  background-color: #4CAF50; /* 自定义按钮的背景颜色 */
  color: white; /* 自定义按钮的文字颜色 */
  border: none; /* 去掉边框 */
  border-radius: 5px; /* 圆角 */
  cursor: pointer; /* 鼠标悬停时显示为指针 */
}