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?

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

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

Unusual performance issues observed in a flexbox when adjusting window size in mobile Chrome

Encountering an unusual issue with flexbox on a mobile browser. For a visual demonstration, view this gif Specifically happening on Chrome mobile on a Google Pixel phone. Using a resize script to adjust element sizes due to limitations with 100vh: windo ...

Organizing Pictures in a Gridded Design

My dilemma lies in displaying a set of thumbnail images within a div. The width of the div can vary depending on the screen size. Each image is fixed at 150px * 150px with a padding of 5px. I aim to arrange these thumbnails in a grid layout while ensuring ...

Separate the label and content sections in an Angular Material vertical stepper

After applying the following CSS: mat-step-header{ display: flex ; justify-content: flex-end ; } I am attempting to make this stepper function properly. I have implemented Angular Material design for a vertical stepper. How can I position the steppe ...

Prevent access to website during execution of background tasks

Whenever a user visits the homepage, I need to verify that default values on the database are in place (if this is not the correct location for the check, please advise). Here's what needs to happen: Determine if the database is empty (if not, skip ...

Tips for splitting a container of specific height into sections measuring 80% and 20%

I am working on a container with a fixed position that I want to split into two halves: 80% and 20% at the bottom. This is what I want it to look like: Click here to see the image. Note: The layout should adjust itself when the window is resized. You c ...

a height of 100% with a minimum height of 100%

Is there a way to make the third and fourth rectangles have the same position while filling all the remaining height in %? Keep in mind that we can't change the min-height:100% on the body or html. Feel free to use CSS and HTML for your code solution. ...

Achieving equal height for the englobing/parent div and the inner divs

To achieve a standard left, middle, and right column layout, it is necessary for me to enclose various inner divs of different heights within a surrounding/parent div. It is crucial that the parent div adjusts its height to match the tallest inner div, whi ...

Singling out a particular navigation tab

When attempting to link specific table IDs so that the corresponding tab is active when opened (i.e. www.gohome.com/html#profile), I am facing an issue where the active tab remains unchanged. Even after specifically calling out tab IDs, there seems to be n ...

Diverging Width Values Between Chrome and Firefox with Jquery's .width() Method

Currently, I am implementing this JQuery script for my table. $(document).ready(function () { var tableBottom = $(window).height() - $('#compare-table').height(); $(window).scroll(function (event) { var y = $(this).scrollTo ...

Does Google's caching process differ when using <span> tags instead of <h> tags for headings?

Does the choice between using <span class="heading"> and <h> tags impact search engine optimization for Google? As I'm constructing a website, I decided to style the headings and subheadings with <span>. However, I began to wonder i ...

Flashing background colors on a website

Can anyone explain why this code won't alternate the background color of my website between two different colors? <script type="text/javascript"> function blinkit() { intrvl = 0; for (nTimes = 0; nTimes < 3; nTimes++) { intrv ...

What is the best way to have gulp monitor my sass file updates and generate a single css file?

I'm currently working on a project using ASP.NET MVC 5 framework and Visual Studio 2013. In order to automate the process of compiling my sass files and publishing them into a bundle.css file, I decided to utilize gulp. Here are the steps I took: I ...

Issue with random pages where global header.php is not showing a specific image

I'm currently revamping a website that was originally developed using codeigniter. The backend is quite chaotic with no clear identifiers for anything. I recently updated the banner in the header.php file, adjusting the style to suit the requirements. ...

Eliminating excess space beneath nested images while adjusting the size without distorting the image

Struggling with getting an image to scale properly inside a nested div in a fluid layout. Looking for advice on how to prevent the image from becoming smaller than its parent div. EDIT: Here is an updated CodePen link demonstrating that using min-height s ...

Placing a list item at the beginning of an unordered list in EJS with MongoDB and Node.js using Express

What I've done: I already have knowledge on how to add an LI to UL, but it always goes to the bottom. What I'm trying to achieve: Add an LI to the top so that when my div.todos-wrapper (which has y-oveflow: hidden) hides overflow, the todos you a ...

When the page is zoomed in, the image exceeds the boundaries of the parent div

I attempted to position the div elements but did not achieve the desired outcome. .tab-vertical { border: 1px solid black; } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" dat ...

Generate a vertical line that spans the entire length of the webpage in a vertical direction

Looking for a way to add vertical borders that span the entire webpage to some text? Check out this HTML snippet: <div id="vLine"> <h1>text</h1> </div> Here's the accompanying CSS: #vLine { height: 100%; width: 5 ...

Intersecting interactions: Mouse events on flex boxes

I am facing a challenge in my React application where I have two panels with buttons displayed using flex properties. Below is a simplified version of the HTML/SCSS code that illustrates the setup: <div class="bottom-panel left"> <butt ...

Issues with jQuery UI Sortable and Bootstrap 3 fluid grid causing flickering and disruptions

I have a basic grid layout consisting of 3 columns in each row, all based on Bootstrap 3. To make it fluid, I decided to omit the 'container' class. My goal is to enable sorting functionality using jQuery UI sortable for the columns within each r ...