要解决按钮上的丑陋阴影和混合模式无效的问题，您可以尝试以下方法：

1. 使用 CSS 样式修复阴影问题：

button {
  box-shadow: none; /* 移除默认阴影 */
  text-shadow: none; /* 移除按钮文字的阴影 */
}

/* 添加自定义阴影样式 */
button {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

2. 确保按钮上的混合模式生效，您需要将该按钮的父元素（或祖先元素）设置为一个具有混合模式效果的容器。例如：

.container {
  mix-blend-mode: multiply; /* 设置混合模式 */
}

然后将按钮放置在这个容器中：

  按钮

3. 如果上述方法无效，您还可以尝试使用 JavaScript 动态设置按钮的样式。首先，确保按钮的样式属性设置正确：

button {
  box-shadow: none;
  text-shadow: none;
}

然后，使用 JavaScript 选择按钮元素并添加样式：

const button = document.querySelector('button');
button.style.boxShadow = '2px 2px 4px rgba(0, 0, 0, 0.5)';

这样，您就可以自定义按钮的阴影样式。

希望这些方法能够帮助您解决按钮上的丑陋阴影和混合模式无效的问题！