Button Structure in Menu
You can structure a button within a menu item like this:
Button Structure in Menu
<li> <a class="nav-link btn btn-primary" href="#footer" >Contact Us <i class="fas fa-arrow-right"></i ></a> </li>
The button is constructed using the <a>
tag and is set to navigate to #footer
upon click.
While the <button>
tag also exists for creating buttons, here we demonstrate how to use the <a>
tag to create a button.
Clicking it will take you to the #footer
section at the bottom of the page. Press the Contact Us button to navigate to that section.
Button Styling
Button Styling
/* Buttons */ .btn { display: inline-block; padding: 12px 32px; border-radius: 30px; text-transform: uppercase; font-size: 14px; transition: 0.3s; } .btn-primary { background: var(--primary-color); color: #000000; } .btn-secondary { margin: 5px 0; background-color: var(--bg-secondary); color: var(--bg-primary); }
Lecture
AI Tutor
Design
Upload
Notes
Favorites
Help