# Change Gtk Button color

**URL:** <https://discourse.julialang.org/t/change-gtk-button-color/62433>\
**Category:** Visualization\
**Tags:** question\
**Created:** [June 5, 2021, 12:57pm UTC](https://discourse.julialang.org/t/change-gtk-button-color/62433 "2021-06-05T12:57:29Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Christopher\_Fisher](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/christopher_fisher/32/26132_2.png) [@Christopher\_Fisher](https://discourse.julialang.org/u/Christopher_Fisher)\
**Post date:** [June 5, 2021, 12:57pm UTC](https://discourse.julialang.org/t/change-gtk-button-color/62433/1 "2021-06-05T12:57:29Z")

</div>

Hi all,

I would like to change the color of a button in Gtk based on an event and change the color or darken the button when it is selected.

Right now I am stuck simply trying to change the color. My approach is based on this [source](https://stackoverflow.com/questions/1706550/gtk-modifying-background-color-of-gtkbutton) and this [source](https://github.com/JuliaGraphics/Gtk.jl/issues/323). I have two files:

> **example.jl**
>
> ```julia
> using Gtk, Gtk.ShortNames
> 
> style_file = joinpath(dirname(Base.source_path()), "style.css")
> 
> provider = CssProviderLeaf(filename = style_file)
> 
> w = Window("")
> 
> button = GtkButton("")
> 
> set_gtk_property!(button, :name, "green_button")
> 
> push!(w, button)
> 
> screen = Gtk.GAccessor.style_context(button)
> 
> push!(screen, StyleProvider(provider), 600)
> 
> Gtk.showall(w)
> 
> ```

> **style.css**
>
> ```julia
> #green_button{
> background-color: green;
> color: white;
> font-family: DejaVu Sans;
> font-style: normal;
> font-weight: bold;
> font-size: 20px;
> border-radius: 15px;
> }
> 
> #green_button:checked{
> background-color: rgb(152, 226, 152);
> color: white;
> font-family: DejaVu Sans;
> font-style: normal;
> font-weight: bold;
> font-size: 20px;
> border-radius: 15px;
> }
> 
> ```

Unfortunately, the color does not change. Any help would be appreciated.

---

<div class="post-metadata">

**Author:** ![Christopher\_Fisher](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/christopher_fisher/32/26132_2.png) [@Christopher\_Fisher](https://discourse.julialang.org/u/Christopher_Fisher)\
**Post date:** [June 5, 2021, 5:11pm UTC](https://discourse.julialang.org/t/change-gtk-button-color/62433/2 "2021-06-05T17:11:11Z")

</div>

The following works for labels:

> **Summary**
>
> ```julia
> using Gtk, Gtk.ShortNames
> 
> win = Window("Test")
> 
> label = Label("Some text")
> 
> sc = Gtk.GAccessor.style_context(label)
> 
> pr = CssProviderLeaf(data="#blue_text {color:blue;}")
> 
> push!(sc, StyleProvider(pr), 600)
> 
> set_gtk_property!(label, :name, "blue_text")
> 
> push!(win, label)
> 
> showall(win)
> 
> ```

However, it does not work when adapted for buttons:

> **Summary**
>
> ```julia
> using Gtk, Gtk.ShortNames
> 
> w = Window("")
> 
> button = GtkButton("")
> 
> sc = Gtk.GAccessor.style_context(button)
> 
> pr = CssProviderLeaf(data="#green_button {color:green;}")
> 
> push!(sc, StyleProvider(pr), 600)
> 
> set_gtk_property!(button, :name, "green_button")
> 
> push!(w, button)
> 
> Gtk.showall(w)
> 
> ```

Any ideas?

---

<div class="post-metadata">

**Author:** ![czylabsonasa](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/czylabsonasa/32/8663_2.png) [@czylabsonasa](https://discourse.julialang.org/u/czylabsonasa)\
**Post date:** [August 1, 2021, 8:17pm UTC](https://discourse.julialang.org/t/change-gtk-button-color/62433/3 "2021-08-01T20:17:45Z")

</div>

@Christopher_Fisher: in the css-provider’s data the `color:green` should be `background:green`

[@everyone](https://discourse.julialang.org/groups/everyone): for those who are interested:

> **MWE**
>
> ```julia
> using Gtk 
> 
> let
> 
> win = GtkWindow("ButtonColorTest 1")
> 
> butt = GtkButton("")
> sc = GAccessor.style_context(butt)
> 
> blue = GtkCssProvider(data="#blue {background:blue;}")
> yellow = GtkCssProvider(data="#yellow {background:yellow;}")
> 
> spb = GtkStyleProvider(blue)
> spy = GtkStyleProvider(yellow)
> push!(sc, spb, 600)
> 
> set_gtk_property!(butt, :name, "blue")
> 
> clickhandler = signal_connect(butt, "clicked") do widget
> if get_gtk_property(widget, :name, String) == "blue"
> push!(sc, spy, 600)
> set_gtk_property!(butt, :name, "yellow")
> else
> push!(sc, spb, 600)
> set_gtk_property!(butt, :name, "blue")
> end
> end
> 
> push!(win, butt)
> showall(win)
> 
> end
> 
> ```