Search code examples
pythonbokeh

Styling a button in Bokeh package for Python

I am wanting to change a button in the Bokeh package to a different color. I have read about the button_types but want to define my own styling for it. I have tried with a minimum example of a button using css_classes but that isn't working for me. I have also tried the styles but that only accesses the underlying element not the button itself. Is there a method to change the color of the Bokeh button itself?

For example, I have a main.py as well as a styles.css styles for .custom_button_bokeh button.bk.bk-btn.bk-btn-default {}

button = Button(label="Testing CSS", css_classes=["custom_button_bokeh"])

This doesn't work for me, no styles are applied

button = Button(label="Testing CSS", styles={"background-color":"#00448a"}, )

This works but styles the wrong component, the background behind the button visible only because the button corners are rounded

Thank you in advance!

I tried to style the button component of the Button widget in the Bokeh package, but it styles the wrong component or nothing at all.

Solution

  • The solution is to use a custom stylesheet like InlineStyleSheet and overwrite the css.

    In the example below the background color for the plain button is set to lightgray.

    from bokeh.io import show, output_notebook
from bokeh.models import Button, CustomJS, InlineStyleSheet
output_notebook()

stylesheet = InlineStyleSheet(css=".bk-btn { background-color: lightgray; }")
button = Button(label="Foo", stylesheets=[stylesheet])

show(button)

    lightgray button