Vaadin 23 如何创建无边缘透明按钮？

Vaadin 23的LUMO主题没有直接提供无边缘透明按钮的内置样式，你可以通过以下两种方式实现：

方式一：基于内置tertiary样式扩展 #

tertiary样式本身已经移除了按钮的边框和默认背景，在此基础上调整透明度即可：

1. 添加自定义CSS：

.vaadin-button.tertiary.transparent-btn {
    color: rgba(0, 0, 0, 0.6); /* 按需修改文本透明度，0为完全透明，1为不透明 */
    /* 若需要整体透明，可添加 opacity: 0.7; */
}

2. 在Java代码中给按钮绑定样式类：

Button transparentButton = new Button("透明按钮");
transparentButton.addClassNames("tertiary", "transparent-btn");

方式二：完全自定义样式 #

如果需要更彻底的样式控制，直接编写自定义样式清除所有默认样式：

1. 添加自定义CSS：

.transparent-edge-less-btn {
    background: transparent;
    border: none;
    box-shadow: none;
    color: inherit; /* 继承父元素文本颜色，可自行指定 */
    opacity: 0.7; /* 调整整体透明度 */
}
/* 可选：添加hover状态效果 */
.transparent-edge-less-btn:hover {
    background: rgba(0, 0, 0, 0.04);
}

2. 在Java代码中应用样式：

Button customBtn = new Button("无边缘透明按钮");
customBtn.addClassName("transparent-edge-less-btn");

内容的提问来源于stack exchange，提问作者Tullio