Make the button appearance change when being clicked different from when being hovered over

I'm trying to create a button that changes background color when hovered over, but maintains the button color without a background color when clicked. This is what my current code looks like:

.windowButton:hover {
    background-color:#1a82b8;
}
.windowButton:active #windowClose polygon {
    fill:#1a82b8;
}

The issue with the code above is that it adds a color to the icon when it's active, but doesn't remove the background color applied by the hover effect. How can I eliminate the background color?

csshover

Answer №1

To give a new look when hovering, change the background color using the :hover state

.windowButton:hover {
    background-color:#1a82b8;
}
.windowButton:active {
   fill:#1a82b8;
   background-color:#000000;/*Customize the color as needed*/
}

Pseudo states inherit values, so it's recommended to only specify styles that need changing in your pseudo state rules for consistency.

Note: Make sure to place the :hover after the :link and :visited (if present) in the CSS definition for it to take effect!

Answer №2

What if we tried this instead?

My hunch is that the discrepancy arises from using background-color in the first property and fill in the second.

button:hover {
    background-color: green;
}
button:active {
    fill: purple;
}

Check out the updated jsFiddle example

Answer №3

To ensure the active state is activated while the user hovers over the button, it is important for the :hover selector to be placed before the :active selector in the code.

According to information from https://developer.mozilla.org/en-US/docs/Web/CSS/:active:

The styles assigned by the :active pseudo-class can be overridden by subsequent link-related pseudo-classes (:link, :hover, or :visited) with equal or greater specificity. To ensure proper styling of links, follow the LVHA-order: :link — :visited — :hover — :active.

Although the accepted answer mentioned the importance of placing :active after :link and :visited, it did not explicitly state the need for :active to come after :hover (which was already the case in the example provided). However, this aspect was not immediately clear to me, prompting me to share this response for others encountering similar confusion due to the positioning of the :hover and :active selectors.

Additionally, I believe adhering to the LVHA order is a useful guideline in addressing this issue.

Answer №4

`button:hover {background-color: transparent; color: yellow;}

button:active {background: white; color: black;}`

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

Fuzzy background when you scroll

My container has an image that blurs when you scroll down the page by 50 pixels. I feel like I've seen this effect somewhere before, but I can't quite recall where. I want the text to remain unaffected and not turn blue. Here is the HTML: <d ...

javascriptjqueryhtmlcss

Unable to locate the CSS for the selected dropdown button in Bootstrap

Seeking help to locate the CSS code responsible for the blue border on a select dropdown button in Bootstrap. It seems simple, but I'm unable to find it. If anyone knows where this specific class is located in the CSS file, please share your insights ...

csstwitter-bootstrapbootstrap-selectbootstrap-selectpicker

Ensure that the background image adjusts appropriately to different screen sizes while maintaining its responsiveness

Currently in the process of developing a single page application using CRA. My goal is to create a hero image with an overlay at the top of the application using a background image. However, I'm facing issues with maintaining the responsiveness of the ...

cssreactjssass

Adjust the background color in HTML emails for dark mode on mobile devices

How can I ensure that the HTML email maintains a normal white background even when mobile dark mode is turned on? I have included the following meta tag and media queries in my code: <meta name="color-scheme" content="light dark"> <meta name="supp ...

csshtml-emailios-darkmodedarkmodeandroid-dark-theme

Experiencing problems with jQuery drop-down menus - added arrows to menu links, but menu disappears when arrows are hovered over

My website has a drop-down menu implemented using jQuery, and it works well. However, I'm facing an issue where I want to add an arrow to the links that have sub-menus. The problem is that when you hover over this arrow, technically you're not ho ...

jqueryhtmlcsswordpress

Design the header and body of the table in a visually appealing format

$("input:checkbox:not(:checked)").each(function() { var column = "table ." + $(this).attr("name"); $(column).hide(); }); $("input:checkbox").click(function() { var column = "table ." + $(this).attr("name"); $(column).toggle(); }) <script src="h ...

javascriptjqueryhtmlcss

Incorporate multiple array values within an if statement

Looking to dynamically change the background image of an element based on specific strings in the URL. Rather than changing it for each individual term like "Site1", I want to be able to target multiple words. Here's what I've tried: var urlstri ...

jquerycssarraysif-statement

Tips for changing the color of MUI TextField in React.JS?

Is there a way to customize the color of the TextField frame? It always shows up as black, making it hard to use in dark mode. I am looking to change the color of both the label and the input line. return ( <div align="center" ...

cssreactjsmaterial-ui

Issue with animated SVG failing to display in web browser

I created an animated .svg file that you can view here, but I encountered an error when trying to open it in the browser: https://i.sstatic.net/YMf5L.png The color appears different, even though the code remains the same. <svg id="Layer_2" data-name ...

htmlcsssvg

adjusting the space between lines for paragraphs with exceptionally large text

Utilizing Bootstrap allows for the adjustment of paragraph font sizes to appear quite large, mimicking the size and style of a heading without the need for an actual heading level HTML tag. I am hesitant to use a genuine <H2> tag to alter the visual ...

htmlcssbootstrap-4accessibility

Enhance <th> elements using CSS classes

I'm encountering some issues with HTML tables. The layout of my table is as follows: <table class="shop_table cart" cellspacing="0"> <thead> <tr> <th class="product-remove">&nbsp;</th> <th clas ...

htmlcss

After the animation finishes, the CSS3 :hover effect ceases to function

There seems to be an issue with my DIV element. When hovering, the background color changes to blue. However, when a button is clicked, a class is added which animates the background color to green. After this animation, the hover effect no longer works an ...

csshovercss-animations

Troubleshooting Challenges with JavaScript DOM Manipulation

I am facing an issue with a table where I need the first column to remain fixed when scrolling horizontally. The code snippet below works perfectly for the first column of td's, but fails to work for the tr's. Despite checking the code thoroughly ...

javascripthtmlcss

Is there a way to eliminate the return?

Struggling to eliminate the unwanted return in my Wordpress loop. The layout is ruined by trying to display a thumbnail next to the entry: https://i.sstatic.net/j3Ozz.png Even using padding for the entry made it worse! Here's the code snippet that ...

htmlcsswordpresspositioning

Is there a way for me to implement my custom CSS design within the Material UI Textfield component?

I have a project in Next.js where I need to create a registration form with custom styles. The issue I'm facing is that I'm struggling to customize a textField using my own CSS. I attempted to use the makeStyles function, but encountered a proble ...

cssreactjsmaterial-uinext.js

A step-by-step guide to invoking a function upon submitting a form with an external JavaScript file

How can I execute a function when the user submits a form using an external JavaScript file? index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>example</title> ...

javascripthtmlcss

Modify the `div` content based on the selected items from the bootstrap dropdown menu

My navigation bar is built using Bootstrap and contains multiple drop-down items. Now I have another div with the class of col-md-3. Within this div, I would like to display the items of the dropdown menu when hovered over. Currently, hovering over a dro ...

javascriptjqueryhtmlcsstwitter-bootstrap

Adjustable div heights for text within inline elements

How can I make two inline-table divs (content and sidebar) have the same height regardless of their content? I've experimented with various attributes, but nothing seems to be working. You can view my website here. ...

htmlcss

Navigate to a different web page within the body tag without changing the current URL by utilizing a hash symbol

I am working with two HTML files, index.html and about.html. My goal is to display the content of about.html within my index.html without navigating away from it. After observing many websites, I noticed that they often use #about in their URLs to dynamic ...

javascriptphphtmlcss

Arranging images in a row with the help of :before and :after styling

Looking to use the pseudo selectors :before and :after to create a border around a div with images, but running into some issues. The :after image is not positioning correctly on the right side of the element and the text is dropping below the image. Check ...

htmlcss