Black Lives Matter. Please consider donating to Black Girls Code today.

beginner's button

Good morning everyone, I decided to use Dash for one of my projects because I noticed that it is very powerful and practical to use. I haven’t even used it for two days so I’m just getting started. I wanted to ask this community for some advice because at the moment I’m not able to move forward on my own. I found an example very similar to what I would like to do:

-- coding: utf-8 --

import dash
from dash.dependencies import Input, Output
import dash_html_components as html

external_stylesheets = [‘’]

app = dash.Dash(name, external_stylesheets=external_stylesheets)

app.layout = html.Div([
html.Button(‘Button 1’, id=‘btn-nclicks-1’, n_clicks=0),
html.Button(‘Button 2’, id=‘btn-nclicks-2’, n_clicks=0),
html.Button(‘Button 3’, id=‘btn-nclicks-3’, n_clicks=0),

@app.callback(Output(‘container-button-timestamp’, ‘children’),
[Input(‘btn-nclicks-1’, ‘n_clicks’),
Input(‘btn-nclicks-2’, ‘n_clicks’),
Input(‘btn-nclicks-3’, ‘n_clicks’)])
def displayClick(btn1, btn2, btn3):
changed_id = [p[‘prop_id’] for p in dash.callback_context.triggered][0]
if ‘btn-nclicks-1’ in changed_id:
msg = ‘Button 1 was most recently clicked’
elif ‘btn-nclicks-2’ in changed_id:
msg = ‘Button 2 was most recently clicked’
elif ‘btn-nclicks-3’ in changed_id:
msg = ‘Button 3 was most recently clicked’
msg = ‘None of the buttons have been clicked yet’
return html.Div(msg)

if name == ‘main’:

The thing I would like to do, if possible, is to have 2 buttons instead of 3 and to be able to change the color and place them as you like on the screen… I read several documents without being able to get a concrete result… could someone give me an example by changing my code by putting 2 buttons, one red and one blue (once seen how to do it I can put any color) and center them in the center of the screen? Thank you very much to anyone who wants to help me :smiley: