Keeping the color of CSS buttons consistent can be achieved by setting specific

Here is my CSS code:

.horizontalcssmenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style:none;
}

.horizontalcssmenu ul a:active{
    color: #00FFFF;
    background: #FF0033;
    text-decoration: none;
}

/* Styles for top level list items */
.horizontalcssmenu ul li{
    position: relative;
    display: inline;
    float: left;
    height: 34px;
    top: 25px;
    left: 111px;
    width: 71px;
    margin-left: 0px;
}

.horizontalcssmenu ul li a:active{
    color: #00FFFF;
    background: #FF0033;
    text-decoration: none;
}

/* Styling for top level menu link items */
.horizontalcssmenu ul li a{
    border: 2px solid #202020;
    display: block;
    width: 54px;
    padding: 2px 8px;
    text-decoration: none;
    background: url(menubg.gif) center center repeat-x;
    color: Red;
    font: bold 13px Tahoma;
    height: 27px;
    margin-left: 0px;
}

/* Sub level menu */
.horizontalcssmenu ul li ul{
    left: 0;
    top: 0;
    border-top: 1px solid #202020;
    position: absolute;
    display: block;
    visibility: hidden;
    z-index: 100;
}

.horizontalcssmenu ul li ul a:active{
    color: #00FFFF;
    background: #FF0033;
    text-decoration: none;
}

/* Styles for sub level menu list items */
.horizontalcssmenu ul li ul li{
    display: inline;
    float: none;
}

.horizontalcssmenu ul li ul li a:active{
    color: #00FFFF;
    background: #FF0033;
    text-decoration: none;
}

/* Styling for sub level menu links */
.horizontalcssmenu ul li ul li a{
    width: 100px;
    font-weight: normal;
    padding: 2px;
    background: #663300;
    border-width: 1px;
}

.horizontalcssmenu ul li ul li a:active{
    color: #00FFFF;
    background: #FF0033;
    text-decoration: none;
}

.horizontalcssmenu ul li a:hover{
    color: #0066FF;
    background: #FF0033;
    text-decoration: none;
}

.horizontalcssmenu ul li a:active{
    color: #00FFFF;
    background: #FF0033;
    text-decoration: none;
}

.horizontalcssmenu ul li ul li a:hover{
    color: #00FFCC;
    background: #CCCC66
}

.horizontalcssmenu .arrowdiv{
    position: absolute;
    right: 1;
    background: transparent url(image/bg-bubplastic-button.gif) no-repeat center left;
}

* html p#iepara{ 
    padding-top: 1em;
}

/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li { float: left; height: 1%; }
* html .horizontalcssmenu ul li a { height: 1%; }
/* End */

I want to change the button color when the user navigates to a specific page and keep it that way until they leave. How can I achieve this effect?

css

Answer №2

If you're looking to achieve a specific styling for a button based on the page you're at, consider using PHP to dynamically check the current page and apply the styles accordingly. Unfortunately, there isn't a CSS selector specifically for this task.

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

The alignment of my text appears to be off

I am facing an issue with the second <ul> on my webpage, which contains more content compared to the first one. In this second <ul>, the last line is appearing floated to the left and does not appear below the penultimate line as expected. Li ...

htmlcss

Nest Bootstrap columns with rows aligned to the right

Trying to design a front page layout for a takeout restaurant. Encountering an issue where the last row doesn't align properly due to a double-height element. Here is the code snippet: <div class="row"> <a class="col-md-3 img-box img-h ...

htmlcsstwitter-bootstrapnestedalignment

What is preventing the addition of links to the navigation bar when using a sticky navigation bar?

Currently, I am in the process of developing a blog website using Django. One of the features I have successfully implemented is a sticky navigation bar. However, I am facing a challenge with adding links to the menu on the navigation bar due to existing ...

javascriptpythonhtmlcssdjango

The Cascading of Bootstrap Card Designs

Looking for some assistance with my TV Show Searcher project that is based on an API. The functionality is complete, but I'm struggling to get the Bootstrap cards to stack neatly without any empty space between them. I want it to resemble the image ga ...

javascripthtmlcssapibootstrap-4

Rendering of @font-face on Windows 7 was executed flawlessly

I have been utilizing @font-face to implement custom fonts on a website. The custom font displays correctly in Firefox, IE, Safari, and Chrome on Mac. However, when viewed on Chrome in Windows 7, the text appears green at 10px instead of black or grey. ... ...

cssgoogle-chromefont-faceembedded-fonts

Creating tooltips using React and Tailwind CSS

I'm currently working on creating tooltips for icons in my header. I have created a component that combines the icon and tooltip into one div, with Tailwind CSS styles applied. JSX Component: const HeaderIcon = ({ icon, redirect = window.location.pat ...

cssreactjstailwind-css

How to position child divs at the center of a parent div

I am looking to set the maximum width of the "circlecontainer" to 300px, but I also want my 4 child divs (each with a max width of 300px) to remain centered in the browser when it exceeds a width of 1200px. Currently, they are aligned to the left side. Be ...

htmlcss

Manipulate the timing of css animations using javascript

I am currently working with a progress bar that I need to manipulate using JavaScript. The demo of the progress bar has a smooth animation, but when I try to adjust its width using jQuery $($0).css({'width': '80%'}), the animation disap ...

javascriptjquerycsscss-animations

Failure to Present Outcome on Screen

Seeking assistance! I attempted to create a mini loan eligibility web app using JavaScript, but encountered an issue where the displayed result did not match the expected outcome upon clicking the eligibility button. Here is the HTML and JavaScript Code I ...

javascripthtmlcssbootstrap-4

Rails is being overwhelmed by an excessive number of icons being added by Bootstrap

I'm having an issue with adding a user icon to my header. When using Bootstrap, it seems to be adding more icons than I have specified in my code. Can anyone help me figure out what's going on? Thanks in advance! <ul class="nav pull-right"> ...

ruby-on-rails-3csstwitter-bootstraptwitter-bootstrap-rails

CKeditor does not accept special characters or diacritics in keywords

Recently, I came across a helpful code snippet for CKeditor that counts and ranks the most used words in a textarea. This feature is invaluable for generating SEO-keywords suggestions while writing articles. However, there is an issue with non-English char ...

javascripthtmljquerycssckeditor

What is the best way to utilize the sx prop in Material UI for applying styles specifically when the component is active or selected?

In the code snippet below, I have set up the useState hook so that when a ListItem is clicked on, the selected state becomes true. My goal is to apply specific styling when an item is selected using the sx prop instead of creating a styled component for su ...

javascriptcssreactjsmaterial-uifrontend

Ways to customize the default CSS styles of angularJS for elements like search box and more

Looking for a way to customize the appearance of an AngularJs search box? <div ng-controller="PersonListCtrl"> <div class="bar">Search: <input ng-model="query"> </div> <ul cl ...

cssangularjs

Tips for keeping a video background stationary while allowing the text to move smoothly

When I added the video for the background, it only appears at the top of the page. However, I want it to be visible as the rest of the page is scrolled. <div class="hero"> <video autoplay loop muted plays-inline class="back-video&qu ...

javascripthtmlcssfrontendweb-deployment

Creating head tags that are less bouncy

After running my code, I noticed that the headlines didn't transition smoothly - they seemed to jump rather than flow seamlessly. To address this issue, I attempted to incorporate fadeIn and fadeOut functions which did improve the smoothness slightly. ...

javascriptjquerycss

Flexbox mystery: How come the entire div isn't displayed when the element below it is hidden?

I am in need of a versatile column layout where multiple widgets are stacked vertically, adjusting their size dynamically. Each widget consists of a title and scrollable content. The last widget should have the ability to collapse when its title is clicked ...

cssflexbox

What is the process for generating an Electronic Program Guide for television?

Welcome to the forum! I'm a front-end developer at a company for 6 months now, currently working on a TV app. It's my first experience in this field and I'm facing some challenges, particularly with creating an epg for the app. Unfortunately ...

javascriptcssvue.jstelevisionepg

Developing several sliders and ensuring they operate independently of each other

I am currently in the process of developing multiple sliders for a website that I am building. As I reach the halfway point, I have encountered a problem that has stumped me. With several sliders involved, I have successfully obtained the length or count ...

javascriptjqueryhtmlcssslider

What is the method for incorporating this effect into the final sentence of a text?

I am trying to create a unique design effect by applying a custom border to only the last line of text. You can see an example here. In this scenario, the target text is "2000 years old." (with that specific length) and not the entire width of the parent ...

htmlcss

Choose the first element of its type and disregard any elements nested within it

I need to change the color of only the first p element within a specific div. Using :first-child would work in a simple example, but in my project, there are multiple elements and more could be added in the future. I want to avoid using :first-child alto ...

htmlcss