how to make both properties to activate as i hover-CodePudding

i have a button with the following structure:

<button className='ctaBtn'>
    <a href={props.url}>Open</a>
</button>

And this is its styles:

.ctaBtn{
    border-radius: 5px;
    width: 70px;
    height: 40px;
    padding: 10px;
    border: .5px solid rebeccapurple;
    background-color: white;
    color: rebeccapurple;
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    margin-top: 15px;
    margin-bottom: 30px;
}

.ctaBtn:hover{
    background-color: rebeccapurple;
}

.ctaBtn a:hover{
    text-decoration: none;
    color: white;
}

.ctaBtn a{
    list-style-type: none;
    text-decoration: none;
    color: rebeccapurple;
    
}

As i hover over the button the background color changes to purple and as i hover over the a tag the font color changes to white. The issue is that before i get with the cursor to the a tag the button background is purple and the text is also purple. What i want to achieve is that as soon is pass through the button both css properties are activated the background color purple for the button and the white color for the text. How can i achieve this?

CodePudding user response：

We combine some of your properties and hit the nested anchor tag from the parent action. See example below, cheers.

.ctaBtn{
    border-radius: 5px;
    width: 70px;
    height: 40px;
    padding: 10px;
    border: 1px solid purple;
    background-color: white;
    color: purple;
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    margin-top: 15px;
    margin-bottom: 30px;
    transition: background-color .25s ease, color .25s ease;
}

.ctaBtn:hover{
    background-color: purple;
}
.ctaBtn:hover a {
  color: white;
}
.ctaBtn a {
    text-decoration: none;    
}

<button class='ctaBtn'>
    <a href="#">Open</a>
</button>

On a side note though, you shouldn't nest an anchor tag inside a button as they're mutually exclusive in use. I'd prefer to see something like this instead for WCAG and semantic purposes.

.ctaBtn{
    border-radius: 5px;
    height: 40px;
    padding: 10px;
    border: 1px solid purple;
    background-color: white;
    color: purple;
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    margin-top: 15px;
    margin-bottom: 30px;
    transition: background-color .25s ease, color .25s ease;
}

.ctaBtn:hover{
    background-color: purple;
    color: white;
}

<button class='ctaBtn'>
 WORDS
</button>

Or swap button for <a> tag instead but neither as a child of one another.

CodePudding user response：

It's because you set a padding on the button so the a tag is smaller than its parent -> your problem.

Another thing: Don't use an a tag in a button tag, it's accessibility complete nonsense. You only need an a tag and a span.

<a href="#" >
  <span>Open</span>
</a>