rounded pill button bootstrap color code example

Example 1: bootstrap buttons Sizes

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

Example 2: bootstrap Button tags

The .btn classes are designed to be used with the <button> element. 
However, you can also use these classes on <a> or <input> elements
(though some browsers may apply a slightly different rendering).

When using button classes on <a> elements that are used to trigger in-page 
functionality (like collapsing content), rather than linking to new pages or 
sections within the current page, these links should be given a role="button" 
to appropriately convey their purpose to assistive technologies such as screen 
readers.

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">