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

Html – Background clickable and not the text

I have a field and when you click on Google the website opens. But my problem is that I want to click on the whole field and not only on the text!

.section {
    display: flex;
    justify-content: center;
}
.alignment {
    width: 500px;
}
#back-style {
    text-align: center;
    color: white;
    background-color: #e6e6e6;
    line-height: 2.5;
}
<section class="section">
    <div class="alignment">
        <div id="back-style">
            <a href=https://www.google.com">Google</a>
        </div>
    </div>
</section>
Tags:

2

Answers


  1. 0

    Consider making #back-style the link element. You’d need to apply display: block and remove color: white to have it look the same as your original code.

    .section {
    display: flex;
    justify-content: center;
}
.alignment {
    width: 500px;
}
#back-style {
    display: block;
    text-align: center;
    background-color: #e6e6e6;
    line-height: 2.5;
}
    <section class="section">
    <div class="alignment">
        <a id="back-style" href="https://www.google.com">
            Google
        </a>
    </div>
</section>
    Login or Signup to reply.
  2. 0

    The < a > tag is what makes something clickable. It should extend across the whole section that you want to be clickable, so I pulled it out of the div:

    <section class="section">
    <div class="alignment">
        <a href="https://www.google.com">
            <div id="back-style">Google</div>
        </a>
    </div>
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search