Bootstrap's CSS automatically applies a nice look to `<a>` tags when inside an `<li>` inside a `<nav class="navbar-nav">`. I needed this nice look on a clickable `<a>` tag with `href="#"` that executes some javascript.

However i'm also using React, which throws warnings ([see here](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md)) when an `<a>` tag has an href of `#`. So according to [this](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md):

> 
> However, we understand that developers are not always in total control of the visual design of web applications. In cases where it is imperative to provide an element resembling an anchor that purely acts as a click target with no navigation as result, we would like to recommend a compromise.
> 
> 
> Again change the element to a <button>:
> 
> 
> 

```
<button 
  type="button"
  className="link-button" 
  onClick={() => this.setState({showSomething: true})}>
    Press me, I look like a link
</button>

```

> 
> Then use styling to change its appearance to that of a link:
> 
> 
> 

```
.link-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  display: inline;
  margin: 0;
  padding: 0;
}

.link-button:hover,
.link-button:focus {
text-decoration: none;
}

```

That would work, except Bootstrap doesn't apply the CSS to it anymore. Do I need to manually add the CSS to the button, or am I missing something?

It seems the way to do it is to just add the CSS to the button, but i'm not sure. Is there, for example, a way to make buttons with a specific class function exactly like `<a>`s (in terms of CSS)?