Input Components - Buttons Navigation

Buttons - Used for navigation

Button - Navigation

Implementation Code and the output

<div href="" class="nav-pagination-prev-next-container">
  
  <a href="" id="nav-pagination-prev" class="nav-pagination-prev">
    <div class="nav-pg-group">
      <div class="nav-pg-head">
        <i class="fa-solid fa-angle-left"></i>
        Prev
      </div>
      <div class="nav-pg-topic">Previous Topic</div>
    </div>
  </a>
  
  <a href="" id="nav-pagination-next" class="nav-pagination-next">
    <div class="nav-pg-group">
      <div class="nav-pg-head">
        Next
        <i class="fa-solid fa-angle-right"></i>
      </div>
      <div class="nav-pg-topic">Next Topic</div>
    </div>
  </a>

</div>

Output Sample

Change the button content

To change the button text

• In the div elements having the class nav-pg-topic just replace the texts "Previous Topic" and the "Next Topic"

<div class="nav-pg-topic">Previous Topic</div>
<div class="nav-pg-topic">Next Topic</div>

Copy

To change the button anchor element's text link to which the button click will fetch the page

• Add the link to the page in the href attribute found in the anchor element having the class nav-pagination-prev or nav-pagination-next

<a href="/link/location/goes/here.html" id="nav-pagination-prev" class="nav-pagination-prev">
<a href="/link/location/goes/here.html" id="nav-pagination-next" class="nav-pagination-next">

Copy

Button - Navigation - Disabled

Disable the button content

If there is no further navigational link before or after, following steps will help disabling the button and the navigation.

• Add the class disabled in the anchor a element having the class nav-pagination-prev or nav-pagination-next
• remove the href attribute from the same anchor a element

<a id="nav-pagination-next" class="nav-pagination-next disabled">

Copy

Implementation Code and the output

<div href="" class="nav-pagination-prev-next-container">
  
  <a href="" id="nav-pagination-prev" class="nav-pagination-prev">
    <div class="nav-pg-group">
      <div class="nav-pg-head">
        <i class="fa-solid fa-angle-left"></i>
        Prev
      </div>
      <div class="nav-pg-topic">Previous Topic</div>
    </div>
  </a>
  
  <a  id="nav-pagination-next" class="nav-pagination-next disabled">
    <div class="nav-pg-group">
      <div class="nav-pg-head">
        Next
        <i class="fa-solid fa-angle-right"></i>
      </div>
      <div class="nav-pg-topic">Next Topic</div>
    </div>
  </a>

</div>

Output Sample