383. How to create rollover effect for buttons - Part 2?

Problem

We've seen how to create rollover effect for buttons in Part 1.

However, if you have made the rollover color too dark, the button label (which has a default color of black) becomes almost invisible as shown below:

In this case we need to change the color of the button label too to a lighter color as shown below:

How to create rollover effect for buttons - Part 2?


Solution

  • First set the color of the PRELIGHT state as we have outlined in Part 1.
  • Then set the color of the button label with GtkWidget::modify_fg().

Sample Code

1   
 2   
 3   
 4   
 5   
 6   
 7   
 8   
 9   
 10   
 11   
 12   
 13   
 14   
 15   
 16   
 17   
 18   
 19   
 20   
 21   
 22   
 23   
 24   
 25   
 26   
 27   
 28   
 34   
 35   
 36   
 37   
 38   
 39   
 40   
 41   
 42   
 43   
 44   
<?php
$window = new GtkWindow();
$window->set_size_request(400, 150);
$window->connect_simple('destroy', array('Gtk','main_quit'));
$window->add($vbox = new GtkVBox());

// display title
$title = new GtkLabel("Rollover effect for buttons - Part 1");
$title->modify_font(new PangoFontDescription("Times New Roman Italic 10"));
$title->modify_fg(Gtk::STATE_NORMAL, GdkColor::parse("#0000ff"));
$title->set_size_request(-1, 40);
$vbox->pack_start($title, 0, 0);
$vbox->pack_start(new GtkLabel(), 0);

$vbox->pack_start($hbox = new GtkHBox(), 0);
setup_button($hbox, 'button 1');
setup_button($hbox, 'button 2');
setup_button($hbox, 'button 3');

$window->show_all();
Gtk::main();

function setup_button($container, $button_label) {
    $button = new GtkButton($button_label);
    $container->pack_start($button, 0);
    $container->pack_start(new GtkLabel(' '), 0); // add a small gap
    $button->modify_bg(Gtk::STATE_PRELIGHT, 
        GdkColor::parse("#99FFB3")); // note 1
    $button->modify_bg(Gtk::STATE_PRELIGHT, GdkColor::parse("#003366"));
    $button->child->modify_fg(Gtk::STATE_PRELIGHT, 
        GdkColor::parse("#D6D6D6")); // note 2
    $button->connect('clicked', 'on_click');
}

function on_click($button) {
    print "You have clicked: ".$button->get_label()."\n";
}

?>

Output

As shown above.
 

Explanation

  1. Set the background color for the PRELIGHT state.
  2. Set the button label color for the PRELIGHT state.

Related Links

Add comment

Security code
Refresh