Buttons

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. See Bootstrap’s Button Docs for more info.

MP Cloud Technologies

Primary Button

<button class="btn btn-mpcloud btn-mpcloud-lg" type="submit" aria-label="Label">Label</button>
<button class="btn btn-mpcloud" type="submit" aria-label="Label">Label</button>

Single Tag

Topic

<a href="#" class="btn tag-mpcloud" aria-label="Topic">Topic</a>

Multiple Tags

Topic Topic Long Topic Topic Topic Longer Topic Topic Topic Topic Longer Topic

<a href="#" class="btn tag-mpcloud" aria-label="Topic">Topic</a>
<a href="#" class="btn tag-mpcloud" aria-label="Topic">Topic</a>
<a href="#" class="btn tag-mpcloud" aria-label="Topic">Long Topic</a>
<a href="#" class="btn tag-mpcloud" aria-label="Topic">Topic</a>
<a href="#" class="btn tag-mpcloud" aria-label="Topic">Topic</a>
<a href="#" class="btn tag-mpcloud" aria-label="Topic">Longer Topic</a>
<a href="#" class="btn tag-mpcloud" aria-label="Topic">Topic</a>
<a href="#" class="btn tag-mpcloud" aria-label="Topic">Topic</a>
<a href="#" class="btn tag-mpcloud" aria-label="Topic">Topic</a>
<a href="#" class="btn tag-mpcloud" aria-label="Topic">Longer Topic</a>

Leading Content Block Buttons

 
Previous Next 
<div id="MPCloudLeadingContentCarousel" class="carousel mpcloud-leading-content-carousel slide w-50" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      &nbsp;
    </div>
  </div>
  <a class="carousel-control-prev" href="#MPCloudLeadingContentCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#MPCloudLeadingContentCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

EMTech Billing

Primary Button

<button class="btn  btn-emtech btn-emtech-lg" type="submit" aria-label="Label">Label</button>
<button class="btn  btn-emtech" type="submit" aria-label="Label">Label</button>

Secondary Button

<button class="btn btn-emtech btn-emtech-secondary btn-emtech-lg" type="submit" aria-label="Label">Label</button>
<button class="btn btn-emtech btn-emtech-secondary" type="submit" aria-label="Label">Label</button>

Leading Content Block Buttons

 
Previous Next 
<div id="EMTechCarousel" class="carousel emtech-leading-content-carousel slide w-50" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      &nbsp;
    </div>
  </div>
  <a class="carousel-control-prev" href="#EMTechCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#EMTechCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
On this page: