Create Responsive Animated Navbar With Pressed Effect

Its features:

  • It is completely responsive .

  • You can add a link to the name of each menu .

  • It is animated navigation bar with pressed effect.

  • You can change the hover color via CSS if you want.

Try to create like yourself by following the codes below :

Step 1) Add to head : <meta name="viewport" content="width=device-width, initial-scale=1">
Step 2) Add to html : <div class="center"> <a href="#abcd"><button class="button">Link Text</button></a> <a href="#abcd"><button class="button">Link Text</button></a> <a href="#abcd"><button class="button">Link Text</button></a> <a href="#abcd"><button class="button">Link Text</button></a> <a href="#abcd"><button class="button">Link Text</button></a> <a href="#abcd"><button class="button">Link Text</button></a> </div>
Step 3) Add to css : .center { display: flex; justify-content: center; align-items: center; } .button { padding: 8px 18px; font-size: 15px; text-align: center; cursor: pointer; outline: none; color: black; background-color: #acacac; border: 5px solid white; border-radius: 15px; box-shadow: 0 5px #cccccc; } .button:hover { background-color: #ff00ff; } .button:active { background-color: #3e8e41; box-shadow: 0 5px #666; transform: translateY(4px); }

Thank you sir

Congratulations to you on visiting our page.

If you have any feedback, you can give advice through the "Contact Me" form.