On

In HTML, the <button> element is used to create interactive buttons on a webpage. It can be utilized for form submissions, executing JavaScript functions, or navigating to other pages. Below is an example of a well-designed navigation buttons. 






<p class="outgoing-links">

<a href="https://example.com" rel="noopener"><button class="outgoing_button" type="button">Example website</button></a>

<a href="https://example.com" rel="noopener" target="_blank"><button class="outgoing_button" type="button">Example website with new window</button></a>

<a href="#" rel="noopener"><button class="outgoing_button" type="button">Dummy Links</button></a>
  
<a href="#" rel="noopener"><button class="outgoing_button" type="button">This button has a really long text that you can see what happens in mobile phone mode, also in desktop mode. </button></a>

</p> 

<style>
  .outgoing-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
  }
  
.outgoing_button {
    font-family: Tahoma, sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #ffffff;
    background-color: #6600FF;
    padding: 15px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.5s ease;
}

.outgoing_button:hover {
    background-color: #e0ccff;
    color: #000000;
    transition: background-color 0.5s ease;
}
</style>