The dilemma with WordPress button hover effect in CSS

Looking for some help with CSS code to create a button that changes color on mouse-over, transitioning from:

  1. white background to black background

  2. black text to white text

Any assistance would be greatly appreciated!

Here is the CSS I have tried so far (but it's not working as intended):

.wpbc-payment-form .btn, .wpbc-payment-form .button, .booking_form_div .btn, .booking_form_div .button, .booking_form_div .submit, .booking_form_div .button-secondary {
    border-color: #377ec4;
    border-radius:50px;
    color: white;!important
    background: black;!important
    vertical-align: top;
    width: 156px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 15px;
    text-decoration: none;
    -webkit-transition: all .3s ease 0s;
}

.wpbc-payment-form .btn, .wpbc-payment-form .button, .booking_form_div .btn, .booking_form_div .button, .booking_form_div .submit, .booking_form_div .button-secondary:hover {
    text-decoration: none;
    background: black;
    color:white;
}

Here is the HTML code for the button:

<button class="btn btn-default" type="button" onclick="mybooking_submit(this.form,1,'en_US');">Book Now</button>
css

Answer №1

Your hover styling is only applied to specific buttons in the statement.

.booking_form_div .button-secondary
is where the style changes on hover are targeted.

All other buttons will default to a background: black and different styles.

If you want to apply styles individually on hover, you can use the following code snippet:

.b1, .b2{
  width: 20px;
  border: 2px solid #000;
  background : yellow;
}

.b1:hover,.b2:hover{
  background : green;
}
<button class="b1">X</button>
<button class="b2">Y</button>

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

How to Retrieve the Url of a Clicked Element using CSS Property

Is it possible to retrieve the URL when a link is clicked using CSS alone, without relying on JavaScript or jQuery? ...

css

Tips for ensuring the Search button always remains alongside the input bar during resizing with percentages

I've been trying to figure out why the search button is still showing at the bottom left and creating an "l" shape even though I'm using style="overflow: hidden; padding-right: .5em;". Does anyone have any ideas as to what might be causing this i ...

css

Scrollspy in Twitter Bootstrap consistently highlights the final element

I'm struggling to understand why only the final section is being highlighted when scrolling. Can you help? <body data-spy="scroll" data-target="#homeToolbar" data-offset="50"> <nav class="navbar navbar-default navbar-fixed-top" id="homeToo ...

jqueryhtmlcsstwitter-bootstrap

The alignment of Bootstrap v4.5 checkbox is limited as it cannot be positioned horizontally or vertically when placed next to an input field

As stated in the title: Bootstrap's checkbox is having trouble aligning Horizontally or Vertically when placed next to an input. Error Displayed: https://i.sstatic.net/hNHpm.png I have experimented with various solutions, but none have provided sat ...

javascripthtmlcsscheckboxbootstrap-4

Issue with Bootstrap columns being misaligned on mobile devices

On my website, I've implemented a Bootstrap Grid design with three columns under the container-fluid BS attribute, along with .row .no-gutters. While the boxes are perfectly aligned in the desktop view, they stack vertically on mobile and tablet devi ...

htmlcssbootstrap-4

Tips for creating a responsive image gallery

After completing the development of my interactive Video Gallery using only HTML and CSS, I encountered an issue with responsiveness. Whenever I resize my browser, the images go out of the frame. I am looking for a solution to make the image gallery adjust ...

javascriptcsshtmlresponsive-design

Maintain scrolling at the bottom with React.js

Is there a way to make a div element increase in height through an animation without extending beyond the viewable area, causing the window to automatically scroll down as the div expands? I am looking for a solution that will keep the scroll position lock ...

javascriptcssreactjs

Ways to display HTML elements depending on the width of the window

Is there a way to create visually appealing hexagon containers for text that work well across all window widths? Currently, the design is only satisfactory at certain window sizes. I am looking to implement a solution where specific code will be displayed ...

phphtmlcsssassbootstrap-4

Attempting to utilize JavaScript in order to reset a text input field

I'm having trouble clearing a text field using this function. The alert is working but the field remains unchanged. What could be the issue? This function is designed to work on any text field. <!DOCTYPE html> <html> <head> ...

javascriptcss

Optimal-minimal behavior with a versatile CSS grid system

Currently, the use of grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); Results in this behavior: If there are more items than can fit in a row (based on the minimum), new rows are created. If there are fewer items than the row could accommodat ...

htmlcsscss-grid

implementing jquery typewriter plug-in for a responsive bootstrap image

I am using Bootstrap and my image response dynamically, but I am having trouble adding text to it. I would like to use a jQuery typewriter plugin for the text on the image, which should resize according to screen size. Here is my HTML code and I have used ...

jqueryhtmlcsstwitter-bootstrap-3jquery-plugins

What is the best way to load my CSS file using express.static?

How do I properly load my CSS file using express.static in Node.js? I have attempted various methods to link my stylesheet to my HTML file through Express, and I'm also interested in learning how to include images, JavaScript, and other assets to crea ...

javascripthtmlcssnode.jsexpress

What is the hexadecimal color code for a specific element's background?

How can I retrieve the background color code of a specified element? var backgroundColor = $(".element").css("background-color"); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="elemen ...

javascriptjquerycsshexbackground-color

Do elements automatically adapt size in different browsers?

I'm currently designing a website at www.50s.co and everything seems to be working fine in Chrome. However, when I check it in Firefox or IE, the background images appear to be sized differently. Even though the image sizes are supposed to be the same ...

htmlcssbrowserwebcompatibility

Exclusive Design for Progress Bar in HTML and CSS

I am currently working on creating a unique progress bar with numbers at both ends, where the left number represents the current value and the right number represents the maximum or target value. Although I have managed to display the two numbers, I am fac ...

htmlcss

Different methods for modifying the height of an Angular datatable in response to the data provided

Encountering an issue with adjusting the height of a datatable when calling a webservice to populate it. A webpage features a collapsible div element alongside a datatable. Upon collapsing the div, the table's height is calculated and resized using i ...

javascriptjquerycssangularjs

Seeking assistance in optimizing my Javascript code for more efficient canvas rendering

I've created a script for generating random moving lines as a background element for my portfolio. While it runs smoothly on its own, I encounter frame drops when combining it with other CSS animations and effects, especially at the beginning (althoug ...

javascripthtmlcssanimationcanvas

Utilizing jQuery to dynamically update background colors within an ASP repeater based on the selected value of a dropdown list

On my asp.net web page, I have a repeater that displays a table with various fields in each row. I am trying to make it so that when the value of a dropdown within a repeater row changes, the entire row is highlighted in color. While I have achieved this s ...

javascriptjquerycssasp.netwebforms

Top of screen not showing NAV menu

Is there a way to keep my main navigation menu fixed at the top of the page? I have both a hamburger nav menu that pops up when clicked and an embedded page nav menu. I want the hamburger nav menu to always stay on top, but for some reason, the embedded n ...

htmlcss

Is there a way to remove the initial number entered on a calculator's display in order to prevent the second number from being added onto the first one?

I am currently in the process of developing a calculator using HTML, CSS, and JavaScript. However, I have encountered an issue with my code. After a user inputs a number and then clicks on an operator, the operator remains highlighted until the user inputs ...

javascripthtmlcssfrontendcalculator