Unable to modify the text color within a moving button

Working on a school project and implemented an animated button style from w3 schools. However, I'm struggling to change the text color within the button. Being new to HTML, I would greatly appreciate any insights or suggestions on what might be going wrong here. Apologies if this is basic stuff that has already been addressed.

.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>

htmlcss

Answer №1

Avoid using both a button and an anchor tag as it is unnecessary. Simply add the button class to your anchor tag, like this:

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

Just follow the same steps for the other buttons.

Answer №2

Your HTML tags need correcting as they are not nested properly. Here is the corrected version with <a> tags nested correctly:

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

You can now add this CSS to correctly style it:

.button a span{
  color:#FFF;
}

Check out the FIDDLE here

Answer №3

Would you mind attempting to modify the button span section???

Make this replacement

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

with this

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
  color: red; /* or any other color of your choice */
}

Answer №4

Modify the color of these <a> links to override the current setting:

.button a{
    color:#FFFFFF;
}

Make sure to close the <a> tags before the buttons to maintain the correct hierarchy, as closing them after can cause issues.

Check out the demonstration below:

.button a{
   color: #FFFFFF; 
}
.button {
  float: center;
  display: flex;
  display: inline-block;
  border-radius: 10px;
  background-color: #a6a6a6;
  border: none;
  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;
}
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <title>About me</title>
    <link rel="stylesheet" href="main.css">
  </head>

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

    </div>
  </body>

</html>

Answer №5

You were almost there, but I can provide you with the correct sample code:

<button class="button"><a href="first.html"><span>Home</span></a></button>
<button class="button"><a href="index.html"><span>About Me</span></a></button>
<button class="button"><a href="contact.html"><span>Contact</span></a></button>
<button class="button"><a href="projects.html"><span>Projects</span></a></button>
<button class="button"><a href="resume.html"><span>Resume</span></a></button>
<button class="button"><a href="other.html"><span>Other</span></a></button>

Check out the CSS below:

.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;
  color: #FFFFFF;
}
.button:hover span {
  padding-right: 25px;
  color: #FFFFFF;
}
.button:hover span:after {
  opacity: 1;
  right: 0;
}

Additionally, here's the link to the jsfiddle for your reference: https://jsfiddle.net/UXEngineer/0847o2ym/1/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhancing Website Design with Image Borders

I'm currently designing a website for a Media Agency and I'm looking to add a Frame-style border that gives the impression of being placed inside a television. The Television Image I have is a PNG file with a solid outer frame and a transparent i ...

htmlcss

Ways to shift placeholder text slightly to the right within a select dropdown?

Struggling with this issue for hours, I can't seem to figure out how to: Adjust the position of the placeholder text (Search) by 10 pixels to the right in my select component Reduce the height of the field (maybe by 5px) without success. Could someo ...

javascriptcssangularsassangular-material

"Enhance your webpage with Flexslider and captivating stretched images

When working with Flexslider, I encountered a challenge where the image was being stretched to fit the width of the flexslider. I prefer the image to be displayed centered, keeping its original dimensions, and having a black background-color. Is there a ...

cssflexslider

Cross-border PHP document

Each PHP page must begin with the following code: <?php $host="localhost"; // Host name $username=""; // MySQL username $password=""; // MySQL password $db_name=""; // Database name $tbl_name=""; // Table name // Connect to server and select datab ...

phphtml

Steps for making a toggle button with Bootstrap

Initially, I developed a web application using HTML, CSS, and JavaScript. Later on, I was requested to recreate it using Bootstrap as well. While I managed to complete the task successfully, I encountered an issue where toggle buttons in the web app revert ...

javascriptjquerycsstwitter-bootstrapjqtouch

What is the best way to eliminate HTML tags from a PDF document?

Looking for help to strip HTML tags? I'm trying to get rid of the HTML tags in my PDF view. Check out the image below and please assist me with this task. This is the code I am using: $string1 = $_POST["editor1"]; $string1 = str_replace("<p>" ...

phphtmlpdf

Creating a mobile-friendly split column layout with Bootstrap 5

I have a similar question to the one posed in this thread How to split Bootstrap column in mobile mode, but I am working with Bootstrap 5 and the previous solution using float: right no longer works due to flexbox. On desktop, I have two columns and I wan ...

htmltwitter-bootstrapbootstrap-5

Is it possible to horizontally center an auto-fill grid using only CSS?

I would like to fill my page horizontally with as many blocks as possible and center the result. My goal is to have a grid that can resize when the window size changes: wide window xxx small window xx x Is it possible to achieve this without using Java ...

javascripthtmlcsscss-grid

When printing a table in HTML/CSS, only the header will appear on the empty page

I'm struggling to figure out why there are two pages, one blank and one with just the table header in this document. The content looks fine otherwise, but I can't seem to remove these extra pages. Here is the full HTML code: <!DOCTYPE html& ...

htmlcssprinting

Guide to incorporating JSON data into HTML through JavaScript

As I attempt to load data from a JSON file to .js and then to an HTML file, I am facing a challenge. While I can successfully load the JSON values into .js, I am unable to transfer the same values to HTML. Below is the code snippet - could anyone provide a ...

javascriptjqueryhtmljsonangularjs

The functionality of the AJAX Script is failing to load properly on mobile devices

Currently, I am undertaking a project that involves ESP32 Arduino programming to create a webpage where users can interact with buttons to activate relays. Additionally, I have implemented a slider using a short script. This project is inspired by the ESP3 ...

javascripthtmlajaxmobilebrowser

What's the reason for my badge being an oval shape?

I am attempting to design a badge that hovers above my cart icon and shows the total number of items currently in the cart. However, I have encountered an issue where the badge appears as an oval shape rather than a perfect circle. Can anyone assist with ...

cssreactjs

I cannot seem to receive the confirmation of success!

Trying to store user details in a database and display a success message that fades in. I have attempted some code, but unfortunately it's not working. Please help me out. Apologies if I am mistaken. Here is my register.php code: <?php require ...

phpjqueryhtmljsonajax

Adjust the appearance of an element based on user selection from a dropdown menu under certain circumstances

I am working on creating a dropdown menu using a JavaScript array. My goal is to display a specific span element when certain options are selected. For instance, I want the span to be shown only when options "a" and "c" are selected, but not when option " ...

javascripthtmljquerycss

Trouble with applying position absolute to pseudo element in Firefox version 12 and higher

I seem to be running into an issue with the positioning of a pseudo element in Firefox version 12 or higher (possibly even earlier versions). Despite having position:relative on the anchor tag, the element appears to be relative to the entire page. Any ide ...

htmlcssfirefox

Design HTML dropdown menu

I have a sleek menu design with rounded buttons, and I am looking to extend the same style to the dropdown list. I have experimented with various approaches but there are two specific issues that I need assistance with: 1. Achieving rounded corners simil ...

htmlcss

Check out the page design for section one!

I have been attempting to create a link to a specific section on a one-page website. Sometimes it works oddly, but most of the time it gets stuck at the section I clicked on and then manual scrolling does not function properly. From what I've researc ...

javascripthtmlcssonepage-checkout

Is there a way to align the navigation menu options to the right side of the navbar?

I'm having trouble aligning the options in the navbar to the right side. Can anyone help me identify where I'm going wrong in my code? Here is the snippet I'm working with: <div> <nav class="navbar navbar-expand-lg navb ...

htmlcssweb-deployment

What is the best way to keep an image centered in the nav-bar as it decreases in size?

As I work on building a website using a template (https://github.com/learning-zone/web-templates/tree/master/victory-school-free-html5-bootstrap-template), I encountered an issue with the navigation bar. The original design appears like this: Before shrin ...

javascripthtmlcss

What is the best way to toggle the visibility of a div when a button is clicked?

I have a container with a registration wizard, and I want to toggle the visibility of this container when a button is clicked. How can I achieve this? Check out the code snippet below. Thank you :) <div id="wizard" class="swMain"> <ul> ...

htmlbuttonhideshow