How do I make a text appear normal in a <div> included in an Anchor Element?

Question

to learn HTML more in depth I'm building the website of a famous fashion brand, trying to emulate and build all the functions that I see with the HTML knowledge that I have. I'm coding a part of the website in which a whole <div> is clickable, including a button, some text and an image. The problem is that all the text that is included in this div (that is, in its turn, included in an Anchor element), becomes a link. How do I make the text appear normal?

This is what I've tried so far.

<section class="twoModels">
            <a href="#">
                <div class="first-model">
                        <div class="first-model-photo">
                            <img src="/img/first-model.jpg" alt="Our Coats" title="Our coats" width="375" loading="lazy">
                        </div>
                        <div class="first-model-text">
                            <h3><!--This is the part of text I want to look normal-->Dress Code: Maglieria</h3>
                        </div>
                        <div class="first-model-cta">
                            <button>Scopri di più</button>
                        </div>
                </div>    
            </a>
</section>

imvain2 · Accepted Answer · 2023-09-20 18:07:23Z

0

First, you don't need to use the button tag to make something look like a button. You can use basic CSS for that. Also, you don't want to have a button as a child of an anchor, that could have unexpected results.

To make text not have underlines, you can use text-decoration:none

For my answer, I converted your button to a div and styled it via CSS. I also set the text to text-decoration:none so the text didn't have an under.

.twoModels a{
  text-decoration:none;
}

.btn{
  display:inline-block;
  border-radius:10px;
  background:black;
  color:white;
  padding:10px;
}

.btn:hover{
  background:white;
  color:black;
}

<section class="twoModels">
            <a href="#">
                <div class="first-model">
                        <div class="first-model-photo">
                            <img src="/img/first-model.jpg" alt="Our Coats" title="Our coats" width="375" loading="lazy">
                        </div>
                        <div class="first-model-text">
                            <h3><!--This is the part of text I want to look normal-->Dress Code: Maglieria</h3>
                        </div>
                        <div class="first-model-cta">
                            <div class="btn">Scopri di più</div>
                        </div>
                </div>    
            </a>
</section>

answered Sep 20, 2023 at 18:07

imvain2

15.9k1 gold badge19 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

giuseppeBianchino Over a year ago

Thank you a lot! Since I still do not know anything about CSS I made it like a button. This is the website I'm "copying", so that you can see what I want to do. it.maxmara.com/?itm_campaign=geo_IT&_gl=1*q9vvfq*_gaNTE4MDAxMjk3LjE2OTUyNDQ0NDE._ga_BJCF526Z00*MTY5NTI0NDQ0MS4xLjAuMTY5NTI0NDQ0MS4wLjAuMA..

JANENDRA SINGH · Accepted Answer · 2023-09-20 18:19:23Z

To make only specific parts of a clickable and leave the rest of the text looking normal, you can use nested anchor tags and CSS to style the text differently. Here's how you can modify your HTML and CSS to achieve this:

/* Style the anchor tag within the h3 */
.first-model-text h3 a {
    text-decoration: none; /* Remove underline for the link */
    color: #YourDesiredTextColor; /* Set your desired text color */
}

/* Style the anchor tag when hovered */
.first-model-text h3 a:hover {
    text-decoration: underline; /* Add underline on hover */
    /* Add any other styles you want on hover */
}

<section class="twoModels">
    <div class="first-model">
        <a href="#">
            <div class="first-model-photo">
                <img src="/img/first-model.jpg" alt="Our Coats" title="Our coats" width="375" loading="lazy">
            </div>
        </a>
        <div class="first-model-text">
            <h3>Dress Code: <a href="#">Maglieria</a></h3>
        </div>
        <div class="first-model-cta">
            <button>Scopri di più</button>
        </div>
    </div>
</section>

In this modified code, we've wrapped only the "Maglieria" text within its own tag. This will make only the "Maglieria" text a clickable link, and the rest of the text will appear normal. Additionally, we've added some CSS to style the link and its hover state.

Make sure to replace #YourDesiredTextColor with the color you want for the link text.

Collectives™ on Stack Overflow

How do I make a text appear normal in a <div> included in an Anchor Element?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related