currenly my button is rectangular shaped. How would I convert it to a pill shape?

  <MDBBtn
       style={{ background: 'linear-gradient(to right, rgb(3, 138, 255), rgb(118, 75, 162))' }}
       className="btn btn-lg btn-danger center modal-button"
       ref={buttonRef}
       onClick={showModal}
  >
       {triggerText}

 </MDBBtn>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

CodePudding user response：

According to the docs, you would have to overwrite the border-radius of the button styles: https://getbootstrap.com/docs/5.2/components/buttons/#css You could probably set it to a very high value like 999px

// Allows for customizing button radius independently from global border radius
$btn-border-radius:           $border-radius;
$btn-border-radius-sm:        $border-radius-sm;
$btn-border-radius-lg:        $border-radius-lg;

CodePudding user response：

If you use Bootstrap CSS you can add a class named rounded-pill

  <MDBBtn
       style={{ background: 'linear-gradient(to right, rgb(3, 138, 255), rgb(118, 75, 162))' }}
       className="btn btn-lg btn-danger center modal-button rounded-pill"
       ref={buttonRef}
       onClick={showModal}
  >
       {triggerText}

 </MDBBtn>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;