CSS to add shadow/border to each button when bootstrap buttons are active

Question

I am using the React framework to create the front-end and using Bootstrap 5.3 for the design.

According to my understanding, Bootstrap has now eliminated the shadow effect as a standard. So, if the button is active, the button will not show shadow/border, like in the Bootstrap v5.0 documentation.

https://getbootstrap.com/docs/5.0/components/buttons/

Unfortunately, I don't know how to customize individual buttons directly in code. Is it possible to activate this shadow effect by adding a style tag to the button, or a label tag to the grouped buttons?

style={{*Here's some CSS magic*}}

Here is some sample code I want to customize three buttons with this drop shadow effect we know from v5.0.

<div className="row">
  <h4>Select buffer</h4>
</div>
<div className="row">
  <div className="col-sm-4 p-3 d-flex justify-content-center">
    <input type="radio" className="btn-check" name="chooseBuffer" id="buffer1" autoComplete="off" onClick={() => measurementConfig.buffer = 1 } />
    <label className="btn btn-lg btn-warning" htmlFor="buffer1"><span className="bi-database-add"></span>&nbsp;buffer1</label> ;
  </div>
  <div className="col-sm-4 p-3 d-flex justify-content-center">
    <input type="radio" className="btn-check" name="chooseBuffer" id="buffer2" autoComplete="off" onClick={() => measurementConfig.buffer = 2 } />
    <label className="btn btn-lg btn-success" htmlFor="buffer2"><span className="bi-database-add"></span>&nbsp;buffer2</label> ;
  </div>
  <div className="col-sm-4 p-3 d-flex justify-content-center">
    <input type="radio" className="btn-check" name="chooseBuffer" id="buffer3" autoComplete="off" onClick={() => measurementConfig.buffer = 3 } />
    <label className="btn btn-lg btn-info" htmlFor="buffer3"><span className="bi-database-add"></span>&nbsp;buffer3</label> ;
  </div>
</div>

Thanks in advance!

Answer 1

Using this css, it will select the next adjacent label of the selected radio button input.

input[type="radio"]:checked+label.btn {
   border: 1px solid #000; //在这里添加边框/阴影
}