/* 基础按钮样式 */
.button {
  cursor: pointer;
  text-transform: uppercase;
  background-color: white;
  padding: 0.5rem 1rem; /* px-4 py-2 */
  border: none;
  outline: none;
  position: relative;
  font-family: inherit;
  transition: all 0.3s ease;
}

/* 激活（按下）状态 */
.button:active {
  transform: translateX(0.5px) translateY(0.5px);
}

/* 悬停状态 - 双色阴影效果 */
.button:hover {
  box-shadow: 
    0.5rem 0.5rem #F44336,
    -0.5rem -0.5rem #00BCD4;
}

/* 如果想要更平滑的过渡效果 */
.button {
  transition: transform 0.1s ease, 
              box-shadow 0.3s ease;
}

/* 为了更好的视觉效果，可以添加一些细节 */
.button {
  border: 2px solid #333;
  color: #333;
  font-weight: 600;
  letter-spacing: 1px;
}