Beautiful Buttons

GtkButton is a workhorse widget. It occurs dozens of times in every application. Most buttons are very mundane, and there is not much to say about a 'Close' button. But paying attention to detail matters, and getting your buttons just right makes your application look a little bit more polished.

GTK+ buttons have a number of features that are a little bit under the covers, but are important to keyboard users.

Mnemonics

If your buttons contain text, it is a good idea to give them a mnemonic (that is the underlined character that can be activated when holding Alt). To do so in a ui file, you can use the following:

  <child>
    <object class="GtkButton" id="mybutton">
      <property name="visible">True</property>
      <property name="label" translatable="yes">Frob_nicate</property>
      <property name="use_underline">True</property>
    </object>
  </child>

Notice the last property, use-underline - it is the important piece here. Without it, the button label would display the _ between the b and the n.

Default activation

In a dialog, one widget may be marked as the default, which means that it will be activated when the user hits 'Enter'. Often, it is appropriate for a button to be marked as the default widget. In the simplest case, you can make a button the default by calling gtk_widget_grab_default() (it must be marked as 'can-default' for this to work).

  gtk_widget_set_can_default (button, TRUE);
  gtk_widget_grab_default (button);

One more detail that is good to know about default activation is that hitting Enter while the focus is in a GtkEntry will only activate the default widget if the entry is marked as 'activates-default'.

  gtk_entry_set_activates_default (entry, TRUE);

Icons or text ?

In the old days, buttons commonly had an icon and a label. Nowadays, it is much more common to either have a label, or an icon, but not both. When a button contains a label, it is good to give it some more padding at the left and right, so the text does not appear to be squished. For buttons that just contain an icon, on the other hand, it looks much better, to have a tight, square appearance. The Adwaita theme takes care of this automatically, by adjusting the style depending on whether a button has the 'text-button' or 'image-button' style class. Normally, GTK+ takes care of setting these style classes automatically, but in rare cases, it may be necessary to set them manually (e.g. when styling a widget that looks like a button, but is not technically a GtkButton subclass).

  context = gtk_widget_get_style_context (button);
  gtk_style_context_add_class (context, "image-button");

Suggested actions

While most buttons are gray, it has become more fashionable to emphasize buttons that are the suggested action, by giving them a different color. In the Adwaita theme, the color is blue. This is somewhat complementary to the default activation I've mentioned above. While default activation is more about behaviour, the suggested action is more about the visuals. If you want the one, you probably want the other too.

To mark a button as suggested action, simple add the 'suggested-action' style class to it. In a .ui file, this looks as follows:

  <object class="GtkButton" id="good-stuff">
    ...
    <style>
      <class name="suggested-action"/>
    </style>
  </object>

Recently, another style class for dangerous actions has been added as well: 'destructive-action'. The Adwaita theme uses red for buttons marked as such.

Custom buttons

Sometimes, a widget should behave like a button (activate on click, accept keyboard focus, etc), but look entirely different. With GTK+'s css theming, this can be achieved to a large degree.

.custom-button {
        border-radius: 0;
        border-width: 3;
        border-image: url("shadow.png") 3 3 3 3 stretch;
        background-image: none;
        background-color: @list_box_bg;
}

.custom-button:hover {
        background-color: @content_view_bg;
}

Here is an example of the css for a button that has a drop shadow and turns darker on hover.

Linked buttons

Linking buttons together can make it more obvious that their function is related. The usual way to achieve this is to put the buttons in a box with the 'linked' style class:

<object class="GtkBox" id="box">
  <property name="visible">True</property>
  <property name="orientation">horizontal</property>
  <property name="homogeneous">True</property>
  <style>
    <class name="linked"/>
  </style>
  <child>
    <object class="GtkRadioButton" id="sun">
      <property name="visible">True</property>
      <property name="label">Sun</property>
      <property name="draw-indicator">False</property>
    </object>
  </child>
  ...