如何将GTK Rust中的按钮样式修改为类似链接的外观？

问题背景 #

在GTK Rust项目中尝试将按钮修改为链接样式，最初使用的CSS代码如下：

.MainScreenCpt__button_superman_button {
  color: #FFFFFF;
  font-size: 16px;
  text-decoration: underline;
  cursor: pointer;
}

对应的Rust创建按钮代码：

let superman_button = button::create_text_button(self, "superman_button", "Superman");
superman_button.set_halign(gtk::Align::Start);
superman_box.add(&superman_button);

运行时触发panic，报错显示cursor不是有效的CSS属性名；后续调整为给按钮内的label设置样式：

.MainScreenCpt__button_superman_button label {
  color: #FFFFFF;
  font-size: 16px;
  text-decoration: underline;
}

此时label样式生效，但按钮仍保留默认按钮外观，需进一步调整让整体看起来像链接。

解决方案 #

1. 移除GTK CSS不支持的属性 #

GTK的CSS子集不支持cursor属性，且text-decoration仅对文本元素（如label）生效，需直接作用于按钮内部的label。

2. 重置按钮的默认外观 #

要让按钮看起来像链接，需要清除按钮的默认背景、边框、内边距和点击反馈样式：

.MainScreenCpt__button_superman_button {
  /* 清除默认背景和边框 */
  background: none;
  border: none;
  /* 移除内边距，让文本和普通链接对齐 */
  padding: 0;
  /* 移除按钮的默认点击反馈 */
  box-shadow: none;
}

.MainScreenCpt__button_superman_button label {
  color: #FFFFFF;
  font-size: 16px;
  text-decoration: underline;
}

/* 可选：添加 hover 效果，模拟链接的鼠标悬停反馈 */
.MainScreenCpt__button_superman_button:hover label {
  color: #ADD8E6; /* 浅蓝，模拟链接hover变色 */
}

/* 可选：移除按钮的聚焦边框 */
.MainScreenCpt__button_superman_button:focus {
  outline: none;
}

3. 补充说明 #

• GTK按钮的样式由自身控件和内部label共同组成，必须同时修改按钮的默认控件样式和内部文本样式才能达到链接效果。
• 无需修改Rust代码，上述CSS即可让按钮外观完全模拟链接，同时保留按钮的交互逻辑。

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