Search code examples
cssrustgtk

How can I make a button in GTK Rust look more like a link?


So I have tried to make a button in a project I am working on in GTK Rust look more like a link using the following:

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

The corresponding main screen component file with the button with the text of superman looks like this:

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

The text of underline and cursor pointer in the css selector causes my application to panic and not compile. Is there a way to turn that button to look more like a link?

The error I get when it panics is:

(process:1073867): GLib-GIO=CRITICAL **: 19:18:34.262: g_application_set_application_id: assertion 'application_id == NULL || g_application_id_is_valid (application_id)' failed thread 'main' panicked at 'called `Result::unwrap()` on an `Err` value: Error { domain: gtk-css-provider-error-quark, code: 3, message: "<data>:8:10'cursor' is not a valid property name" }',
src/main.rs:35:62 note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace

So part of the problem was that I was calling the widget name of superman_button incorrectly, but even after I corrected that, if I try a

.MainScreenCpt__button_superman_button {
  background-color: blue;
}

I get no response, and yet if I do:

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

That works, the label gets styled with no issues, but it still looks like a button.


Solution

  • I ended up doing the following which works:

    .SomeCpt__button_superman_button {
      // styling here 
    }
    
    .SomeCpt__button_superman_button:hover {
       color: #409EFF;
       background-color: rgb(236, 245, 255);
    }
    
    .SomeCpt__button_superman_button:hover label {
      text-decoration-line: underline; 
    }