Adjust the color of the button upon hovering with CSS

I'm having trouble changing the text color from white to black when hovering over the button. The code seems fine, but the text color isn't changing. Can anyone help me figure out how to make it work?

.main__btn {
  font-size: 1.2rem;
  background: rgba(0, 0, 0, 0);
  padding: 15px 50px;
  border-radius: none;
  border-color: #fff;
  margin-top: 2rem;
  cursor: pointer;
  position: relative;
  transition: all 0.35s;
  outline: none;
}

.main__btn a {
  position: relative;
  z-index: 2;
  color: #fff;
  text-decoration: none;
}

.main__btn:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #ffffff;
  transition: all 0.35s;
  border-radius: 4px;
}

.main__btn:hover {
  color: #000;
}

.main__btn:hover:after {
  width: 100%;
}
<button class="main__btn" id="button1"><a href="#">button1</a></button>

htmlcss

Answer №1

To customize the appearance of your anchor (a) tag, make sure to adjust the color property in the CSS code below for the hover effect:

.main__btn:hover a {
  color: #000;
}

If you have defined color: #fff; for the anchor tag previously, it will override the color specified in the .main__btn:hover class.

Answer №2

The color of the anchor tag is set to white. If you apply color:#000 to the parent element, it will not modify the anchor's color.

Instead, you should apply color:#000 directly to the anchor tag.

.main__btn {
  font-size: 1.2rem;
  background: rgba(0, 0, 0, 0);
  padding: 15px 50px;
  border-radius: none;
  border-color: #fff;
  margin-top: 2rem;
  cursor: pointer;
  position: relative;
  transition: all 0.35s;
  outline: none;
}

.main__btn a {
  position: relative;
  z-index: 2;
  color: #fff;
  text-decoration: none;
}

.main__btn:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #ffffff;
  transition: all 0.35s;
  border-radius: 4px;
}

.main__btn:hover a{
  color: #000;
}

.main__btn:hover:after {
  width: 100%;
}
<button class="main__btn" id="button1"><a href="#">button1</a></button>

It's worth noting that including an anchor within a button is considered invalid HTML.- Roy

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

Arranging elements in columns using Bootstrap

I am facing an issue with my columns in bootstrap, as they are currently appearing vertically, one above the other. I need them to be displayed side by side Here is the code I am using: <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 layo ...

htmlcssbootstrap-4

Photo displayed above the carousel using Bootstrap

I'm currently in the process of building a website using the template found at . However, I'm having trouble placing an image in the center of the carousel, above the slides. Here is the code snippet I have tried so far: <div style="positi ...

jqueryhtmlcsstwitter-bootstrap-3

Using TypeScript with Angular UI Router for managing nested named views in the application

Hey there! I am new to typescript and have a bit of experience with Angular. Lately, I've been struggling to make a common angular-ui-router setup work with typescript. I have a nested named views structure that just doesn't seem to load correctl ...

angularjshtmltypescriptangular-ui-router

Enhance User Experience by Implementing Event Listeners for Changing Link Visibility Using mouseover and getElementsBy

I am new to JavaScript and struggling to find a solution. Despite searching online for fixes, none of the solutions I've found seem to work for me. I have spent hours troubleshooting the issue but I must be missing something crucial. Can someone plea ...

javascripthtmlcssaddeventlistenergetelementsbyclassname

Disregard the instructions upon loading the page

I've implemented a directive to automatically focus on the newest input field added to my page. It works well, but there is one issue - when the page loads, the last input is selected by default. I want to exclude this behavior during page load and in ...

javascripthtmlangularjs

Numerous options available in a dropdown menu

I have a Dropdown menu that offers various functions. "Update" option redirects to a page for updating information "Export Form" option redirects to a page for exporting the form Although the current code allows these actions, I am facing an issue with ...

javascriptphphtml

Create a table that allows one column to have ample space, while ensuring that the other columns have uniform widths

This HTML/CSS creation features the following: https://i.stack.imgur.com/R8PRB.png However, the challenge lies in making the Very Good, Good, Fair, Poor, Very Poor columns equal in width while still allowing the "question" column to adjust its width acco ...

htmlcsshtml-table

Guide on how to append input field data to a table using jQuery

My current project involves working with a table, and I have encountered some challenges along the way. Typically, I have 4 input fields where I can input data that is then sent to the table in my view. However, if I exceed 4 values and need to add more, I ...

javascriptjqueryhtmlcss

Numerous sections with tabs on the webpage

I am in need of incorporating multiple tabbed sections on a single page, but unfortunately they are currently interconnected. When one tab is clicked, it impacts the others. To see this issue in action, you can visit: https://jsfiddle.net/pxpsvoc6/ This ...

javascriptjqueryhtmlcss

How to transform an image into a base64 string using Vue

I am having trouble converting a local image to base64. The function reader.readAsDataURL is not working for me. Instead of the image data, I always get 'undefined' assigned to the rawImg variable. The file variable contains metadata from the upl ...

javascripthtmlimagevue.jsbase64

Text field value dynamically changes on key press update

I am currently working on the following code snippet: {% for item in app.session.get('aBasket') %} <input id="product_quantity_{{ item['product_id'] }}" class="form-control quantity" type="text" value="{{ item['product_quan ...

javascriptjqueryhtmlajaxonkeyup

Enter the variable into the parameter

I'm working with some Javascript code: document.getElementById("Grid").style.gridTemplateRows = "repeat(3, 2fr)"; I'm trying to insert a variable as an argument to modify my CSS style. When I attempt the following: "repe ...

javascriptcssdatagridtemplatecolumn

Why doesn't the background color display properly when the div height is set to auto?

When I set the height of #container to auto, the background-color does not display. However, when I set it to a fixed height like 1000px, it shows up. I've attempted using "overflow:auto", but that did not solve the issue. How can I fix this? I want # ...

csshtmlheight

Achieve the highest character count possible within HTML elements

Is it possible for a standard HTML element with defined width and height to manage characters using JavaScript, as shown in the code snippet below? <div id="text-habdler-with-width-and-height" ></div> <script> $("element& ...

javascripthtmlcss

Image positioned above the text in the mobile layout following the text

Can the layout be adjusted so that on desktop, the image is on the right and text on the left in the lower box, but on mobile, the image appears above the text? I understand that placing the image tag after the text tag in HTML would position the image to ...

htmlcsssass

The horizontal overflow in the HTML code was unsuccessful

I stumbled upon an interesting issue where I applied a div with specific styling: overflow-x: scroll However, the outcome was not as expected. Instead of overflowing, the content simply started on a new line. Here is the source code for reference: & ...

javascriptjqueryhtmlcss

jQuery not functioning properly when attempting to add values from two input boxes within multiple input fields

I am facing an issue with a form on my website that contains input fields as shown below. I am trying to add two input boxes to calculate the values of the third input box, but it is only working correctly for the first set and not for the rest. How can ...

javascripthtmljqueryinput

Passing a click event to a reusable component in Angular 2 for enhanced functionality

I am currently working on abstracting out a table that is used by several components. While most of my dynamic table population needs have been met, I am facing a challenge with making the rows clickable in one instance of the table. Previously, I simply ...

javascripthtmlangulartypescriptevent-handling

The module cannot be located due to an error: Package path ./dist/style.css is not being exported from the package

I am facing an issue with importing CSS from a public library built with Vite. When I try to import the CSS using: import 'rd-component/dist/style.css'; I encounter an error during the project build process: ERROR in ./src/page/photo/gen/GenPhot ...

cssreactjstypescriptvite

JQuery Powered Text Analyzer

Our team is in the process of developing a text analyzer tool to review emails before sending them out. The goal is to involve all team members in selecting the best emails to send to clients: Implemented the following HTML code: <p class="sentence" ...

jquerycsshtml