Wardy24 Wardy24 - 5 months ago 9
HTML Question

Can't change color of text inside animated button

Just doing a project for school, and I used a style found on w3 schools for an animated button. For whatever reason, I can't seem to change the color of the text inside the button. I am fairly new to HTML, so if you notice what I'm doing wrong and can give a short explanation it would be greatly appreciated! I apologize if this has been asked already or if this is remedial stuff.



.button {
float: center;
display: flex;
display: inline-block;
border-radius: 10px;
background-color: #a6a6a6;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 26px;
padding: 20px;
min-width: 15.96%;
transition: all 0.3s;
cursor: pointer;
margin: 5px;
text-decoration: none;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: 'ยป';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}

<button class="button" style="vertical-align:middle">
<a href="first.html"><span>Home</span></button></a>
<button class="button" style="vertical-align:middle">
<a href="index.html"><span>About me</span></button></a>
<button class="button" style="vertical-align:middle">
<a href="contact.html"><span>Contact</span></button></a>
<button class="button" style="vertical-align:middle">
<a href="projects.html"><span>Projects</span></button></a>
<button class="button" style="vertical-align:middle">
<a href="resume.html"><span>Resume</span></button></a>
<button class="button" style="vertical-align:middle">
<a href="other.html"><span>Other</span></button></a>




Answer

you don't need a button and an anchor tag. that's redundant, just add the button class to your anchor tag like so..

<a class="button" href="first.html" style="vertical-align:middle"><span>Home</span></a>

repeat for the other buttons.