I've noticed a trendy effect on several websites and I'm curious about how it's done
For example:
When you hover over one of the navbar links, it appears as a button rather than a differently colored text link. How can I achieve this? I am also using bootstrap v5.3.0-alpha1 if that matters.
Here is a sample of my navbar:
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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b0904041f181f190a1b2b5e4558455b460a071b030a5a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b3934342f282f293a2b7632383435281b6a756a6b7568">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="781a17170c0b0c0a1908384d564b564855191408101949">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>