Stylish Navigation Buttons
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>