Lecture

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