Google Ads

January 31, 2019

Create a stylish button in GTK+ (Custom widget creation)

Often times we want to create our own form of buttons and widgets when using widget libraries such as GTK+. Although, we could achieve this by creating theme files but sometimes it is just easier to implement such widget using drawing routines available. In this tutorial, I am going to show you how to create a stylish button in GTK+ by not using widget provided button but by using drawing routines available for GTK+ library like shown below:

First, we create four png images for the button for hover, normal, pressed states and mask. We are going to use Cairo library for drawing our button state images into its container. All the functions required for creating this button are part of Standard GTK+ 2 package, so no external dependencies! for the button creation.

Second, we load button png images using cairo_image_surface_create_from_png function.

Third, we prepare a mask for the button as the button can have any shape where some parts of the button are transparent. We create a pixmap as button mask using gdk_pixmap_new function and format the mask according to mask png file using Cairo drawing functions. Our style button contain would be a GTK+ drawing widget. Finally, we set the mask using gtk_widget_shape_combine_mask function.

Fourth, we have to be able to update the button look according to its state which is achieved by connecting different signals to button container and updating button state variable in the signals callback functions and finally drawing the button images using Cairo functions. The callbacks functions can also be used for achieving normal button operations.

That's it!

Watch the tutorial:


  1. We interactively display visualizations on any device. Downloading large data is avoided with thin computing-style delivery model. Bandwidth and latency limitations are overcome through patented interactive remote visualization over Internet. The knowledge within enormous data is unleashed using A.I. on proprietary supercomputing cloud infrastructure. Graphics Processing Unit (GPU): Supercomputing Power at Fraction of the Cost. Internet latency issues remain the challenging factor for the growth, that in order for cloud gaming to work, a gamer has to be close in proximity to the server that serves the content. With our patents and technologies, this limitation is eliminated allowing secure and fast access to gaming contents.

    Interactive Streaming AI Platform RIS PACS

  2. LifeVoxel.AI platform helps imaging diagnostic centers and hospitals to save up to 50%+ over conventional RIS PACS with higher functionality. LifeVoxel.AI is the fastest RIS PACS available globally and have unimaginable capabilities of centralized PACS across all your network of Imaging Centers to single window HUB.

    RIS PACS software

  3. I can not down load the
    Is the link available now?

    1. Hi, the download server sometimes becomes non operational for a day or two due to maintenance purposes, please try the link again.

    2. Can you give other link to your file, please? I spent a lot of time to wait while link will start work.

    3. Did watch this video?