EventBox Image based buttons can be a simpler approach to buttons based on an image!  See here.

GtkButtons should be great, but they can be a right pain.  Its like they got sort of implemented but without being polished off to allow them to be easily customised and made sexy.  The documentation is basic and there seems to be little in the way of good user created guides out there to help.  If they do what you want then great, but watch out if you want to change them.  We tried to use them as a simple image based button – i.e. we wanted our own image and the button to just be a button showing our image.  The problem was there’s a big border that gets added round the button that looks awful and whilst you can get rid of it in the normal state, it appears in the mouse hover state and there’s no simple property to just kill it. Also the button gets highlighted and again no simple property to kill that.  After ages of trying to get it to behave we decided to just dump it and use image based buttons instead as that’s what we wanted, but here’s where we got to….

Button based on an image that changes when pressed

	GtkWidget *button_down;
	GtkWidget *image_down;

	//----- DOWN BUTTON -----
	button_down = gtk_button_new();
	gtk_button_set_relief(GTK_BUTTON(button_down), GTK_RELIEF_NONE);						//No border
	gtk_button_set_focus_on_click(GTK_BUTTON(button_down), false);							//Don't take focus when clicked
	gtk_button_set_always_show_image(GTK_BUTTON(button_down), true);
	image_down = gtk_image_new_from_file("/home/pi/projects/ui/button_down_a.png");
	gtk_button_set_image(GTK_BUTTON(button_down), image_down);
	//gtk_widget_set_size_request(button_down, 68, 68);			//Will be image size by default, but you can force the widget to be either larger or smaller than it normally would be using this
	gtk_fixed_put(GTK_FIXED(fixed), button_down, 20, 40);		//x, y from top left

	//----- SET THE EVENTS TO BE CALLED ----- 
	g_signal_connect(G_OBJECT(button_down), "pressed", G_CALLBACK(button_press_event), NULL);		//("pressed" must not be changed)
	g_signal_connect(G_OBJECT(button_down), "released", G_CALLBACK(button_release_event), NULL);	//Include if released event is required. ("released" must not be changed)

//***********************************************
//***********************************************
//********** A BUTTON HAS BEEN PRESSED **********
//***********************************************
//***********************************************
gboolean button_press_event (GtkWidget *widget, GdkEvent  *event, gpointer user_data)
{
	if (widget == button_down)
	{
		image_down = gtk_image_new_from_file("/home/pi/projects/ui/button_down_b.png");
		gtk_button_set_image(GTK_BUTTON(button_down), image_down);
	}
	
	return FALSE;							//Return false so event will be called again
}


//************************************************
//************************************************
//********** A BUTTON HAS BEEN RELEASED **********
//************************************************
//************************************************
gboolean button_release_event (GtkWidget *widget, GdkEvent  *event, gpointer   user_data)
{
	if (widget == button_down)
	{
		image_down = gtk_image_new_from_file("/home/pi/projects/ui/button_down_a.png");
		gtk_button_set_image(GTK_BUTTON(button_down), image_down);
	}
	
	return FALSE;							//Return false so event will be called again
}

All good to here, except when you run the app the bloody border and hightlight appears when you mouse over the button.  The only fix appears to be to get at the button css.  The below is where we got to, its not fixed but it demonstrates getting at the css successfully – just needs the right css adding to kill the highlight and border.  Is there a nice simple page to tell you the css properties to use……not that we could find unfortunatly

	//Style the button
	GtkStyleContext *context = gtk_widget_get_style_context(button_down);
	GtkCssProvider *provider = gtk_css_provider_new ();
	gtk_css_provider_load_from_data (GTK_CSS_PROVIDER(provider),
								" GtkWindow {\n"                          
								"   background-color: tan;\n"
								"}\n"
								" GtkButton {\n"
								"   -GtkWidget-focus-line-width: 0;\n"
								"   border-radius: 15;\n"
								"   font: Sans 23;\n"
								"   color: #00008B;\n"                                       
								"   background-color: green;\n"
								"}\n"
								" .button:hover {\n"
								"   background-color: red;\n"
								"   color: white;\n"
								"}\n"
								" .button:hover:active {\n"
								"   background-color: orange;\n"
								"   color: cyan;\n"
								"}\n", -1, NULL);
	gtk_style_context_add_provider(context, GTK_STYLE_PROVIDER(provider), GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);

Delete a button

			gtk_widget_destroy(btnButtonTimerUp);
			btnButtonTimerUp = NULL;

When a widget is destroyed, it will break any references it holds to other objects.  You can safely used destroy on a widget that hasn’t actaully been displayed yet.  You can re-create and place the widget again later after it has previously been destroyed, you’re just removing its current usage.