HTML text disappears when converted into a link

user_15398071 0
Viewed 105

I am trying to convert an existing element in my HTML page to a link, the element has additional css functions to scale it when you hover your mouse over it. 

<!DOCTYPE html>
<html>
<head>
<style>
.lefthotbarbtn{
        float:left;
        padding:12px;
        font-family:Verdana,sans-serif;
        transition:0.3s;
    }
    .lefthotbarbtn:hover{
        float:left;
        padding:12px 32px;
        font-family:Verdana,sans-serif;
        background-color:#d3d3d3;
        border-radius:69px;
        color:#0f0f0f;
        font-family:Verdana,sans-serif;
    }
    
    .contactusbtn{
        float:right;
        padding:12px;
        background-color:white;
        border-radius:69px;
        color:black;
        font-family:Verdana,sans-serif;
        transition:0.3s;
    }
    .contactusbtn:hover{
        float:right;
        border-radius:0px;
        padding:12px 24px;
        background-color:#d3d3d3;
        border-radius:69px;
        color:#0f0f0f;
        font-family:Verdana,sans-serif;
    }
    </style>
</head>
<body>
<div class="lefthotbarbtn">Home</div>
        <div class="lefthotbarbtn">Who Are We?</div>
        <div class="lefthotbarbtn">Products</div>
        <div class="lefthotbarbtn">Help!</div>
            
            <div class="contactusbtn">contact us</div>
            </div>
</body>
</html>

I have tried various ways of converting each individual into a link without deleting existing information but whenever I did, the text would either disappear or move. What I want to be able to do is simply have the text as a link without changing the appearance of it and I can't figure out how.

hover css html
1 Answers

Please mention the things you have tried in future.

I'll say a few things:

  • If all you want is to make them into link simply use the a link tag.
  • To me it seems like your building a header. Use nav with ul li with a. Keeps things clean and generally good practice.
  • If you want to go down this route you can can convert div to a and then use css to design the a however you like.

But If there is a problem with that try you can also do this (Not a good idea in general, why?):

<a href="#"><div class="lefthotbarbtn">Who Are We?</div></a>
user_154052220
Related