Question 45343 in Html Question posted in
Some basic documentation can be found here.

Navbar link hover effect – Html

I keep seeing this effect used on a lot of websites and am wondering how they’re doing it

Example: https://app.uniswap.org/#/?intro=true

When you hover over one of the navbar links, it looks like a button instead of a different colored text link. How would I do this? Also using bootstrap v5.3.0-alpha1 if that makes any difference

I have this navbar as an example:

import './App.css';
import React, { useState, useEffect } from "react";

const App = () => {
    return (
        <div className="App">
            <nav className="navbar navbar-expand-sm">
                <div className="container-fluid">
                    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
                        <span className="navbar-toggler-icon"></span>
                    </button>
                    
                    <a className="navbar-brand d-none d-md-block" href='/'>
                        <img src={"./logo.png"} style={{ height: '50px', width: '50px'}} alt='' />
                    </a>

                    <div className="collapse navbar-collapse text-center justify-content-center" id="navbarTogglerDemo01">
                        <div className="navbar-nav">
                            <a className="nav-link active" aria-current="page" href="/#">Home</a>
                            <a className="nav-link" href="/#">about_1</a>
                            <a className="nav-link" href="/#">about_2</a>
                            <a className="nav-link disabled" href='/'>Disabled</a>
                        </div>
                    </div>

                    <div className="btn-group">
                        <WagmiConfig client={wagmiClient}>
                            <RainbowKitProvider 
                                chains={chains} 
                                initialChain={mainnet}
                                theme={lightTheme({
                                    borderRadius: 'small'
                                })}
                            >
                                <ConnectButton accountStatus='address' chainStatus='none' showBalance={false} />
                            </RainbowKitProvider>
                        </WagmiConfig>

                        <div className="dropdown">
                            <button className="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
                                <i className="bi bi-three-dots"></i>
                            </button>
                            <ul className="dropdown-menu dropdown-menu-end" style={{ width: '30vw'}}>
                                <li><a className="dropdown-item" href="#">Action</a></li>
                                <li><a className="dropdown-item" href="#">Another action</a></li>
                                <li><a className="dropdown-item" href="#">Something else here</a></li>
                                {/* <li><i className={darkMode ? 'fas fa-sun' : 'fas fa-moon'}></i></li> */}
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>
    );
};

export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content="#000000" />
        <meta
            name="description"
            content="Web site created using create-react-app"
        />
        <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
        <!--
            manifest.json provides metadata used when your web app is installed on a
            user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
        -->
        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
        <!--
            Notice the use of %PUBLIC_URL% in the tags above.
            It will be replaced with the URL of the `public` folder during the build.
            Only files inside the `public` folder can be referenced from the HTML.

            Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
            work correctly both with client-side routing and a non-root public URL.
            Learn how to configure a non-root public URL by running `npm run build`.
        -->
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
        <title>React App</title>
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>

        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    </body>
</html>
Tags:

2

Answers


  1. 0

    It’s just adding a background-color on hover. Also, add some padding around the links by default.

    ul {
display: flex;
list-style: none
}

li {
  margin-right: 15px;
}

a {
padding: 8px 15px;
color: #000;
text-decoration: none;
}

li:hover a {
background: #e1e1e1;
border-radius: 5px;

}
    <nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>
    Login or Signup to reply.
  2. 0 
    nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}

nav li {
margin-right: 20px;
}

nav a {
text-decoration: none;
color: #000;
transition: color 0.3s ease;
}

nav a:hover {
color: #fff;
background-color: #000;
}

    In the CSS code above, we first define the basic styles for the navbar,
    including a flexbox layout for the ul element and some margin and padding
    adjustments for the li elements.

    Then, we style the a elements with text-decoration: none and a default
    color of black. We also add a transition property to animate the color
    change when the link is hovered over.

    Finally, we define the :hover styles for the a elements. When a link is
    hovered over, we change the color to white and add a background-color of
    black to create a contrast with the text. This creates a simple but
    effective hover effect for the navbar links.`

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search