This is code of web page:

```
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css.css"  >
    </head>
    <body>
        <script>
            function func() {   
                // do some checks
                window.location = "http://google.com";
            }    
        </script>

        <a href="http://google.com">link</a>
        <br><br>
        <a href="http://google.com"><div class="button">button 1</div></a>
        <br>
        <div class="button" onclick="func()">button 2</div>
    </body>
</html>

```

This is css file:

```
a, a:hover, a:visited, a:active {
    color: inherit;
    text-decoration: none;
}

.button {
    width: 100px;    
    display: block;
    background-color: #cccccc; 
    cursor: pointer;
    text-align: center;
    border: 1px solid #666666;
    padding: 3px;
}

```

There is simple `<a>` link in begin of web page - when user click on that link some site is load. 

Then there is a div that is used as a button, it also wrap in `<a>` tag and it also lead to same site when user click on that div.

Then there is another div that is used as a button, but it not wrap in `<a>` tag and when user click on that div some javascript function is called and after some checks the same site is load.

This is the problem. When user hover his mouse over link or first `div` the URL is displayed on bottom of user browser (<http://google.com>), but this URL isn't displayed in case of second button. I want the same behavior in all cases - either in all cases user don't see the URL or in all cases user see it.

How can I achieve it?