Button
A button is a graphic used to direct users’ attention to a task or action by hyperlinking to relevant information. They are also known as calls-to-action, or CTAs. They are pill-shaped and either compliment or contrast with the primary color of the site or app.
Usage
Use buttons to encourage users to begin or complete a task. While well-written text is central to the success of this component, pair the button with a command for maximum impact.
Examples
A call to action is a suggestion to a user that they engage in a task or initiate a process. The best examples of calls to action are imperative sentences that implore users to act.
<style type="text/css">.blue_btn_grid h4 {<style type="text/css">.blue_btn_grid h4 { text-align: center; } .blue_btn_grid { text-align: center; } .btn {width: 100%;margin-top: 25px;}
</style>
<div class="container blue_btn_grid">
<div class="row">
<div class="col-sm-4">
<h4>Primary</h4>
<a aria-pressed="true" class="btn btn-primary btn-lg active" href="#" role="button">Button label</a><button class="btn btn-primary btn-lg" type="button">Button label</button></div>
<div class="col-sm-4">
<h4>Secondary</h4>
<button class="btn btn-dark btn-lg" type="button">Default</button><button class="btn btn-secondary btn-lg" type="button">Hover</button></div>
<div class="col-sm-4">
<h4>Disable</h4>
<button class="btn btn-secondary btn-lg" disabled="disabled" type="button">Default</button><button class="btn btn-light btn-lg" type="button">Hover</button></div>
</div>
</div>