Hover effect on pricing table button

[ppe29]

How can I add a hover effect to all 3 of the buttons in the pricing table towards the bottom of www.pumphoists.com

[mldarshana]

Hi There @ppe29

Thanks for writing in! You can assign a unique CSS class to your buttons (my-custom-button).

Example:
[x_button class="my-custom-button" href="#" size="large"]Buy Now![/x_button]

Then add custom CSS rules to target those buttons.

.my-custom-button:hover{
  background-color:red;
}

Hope that helps.

[ppe29]

I’m sorry, I must be missing something simple. When I did that, the effect didn’t work.

[Prasant]

Hello @ppe29,

Thanks for updating the thread.

Looks like you haven’t included # before hex color code and that’s a syntax error in your CSS code. Please update CSS with following:

.left-pricing-btn:hover {
    background-color: #e9e9e9 !important;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

[ppe29]

OK, it was a combination of 3 factors:

1. Missing the # sign before the color
2. It needed the !important! tag
3. It also needed a space after the word “hover” before the {

I’m all set now. This helped considerably. I FINALLY understand how classes work now, thanks to @Prasant and @mldarshana.

Cheers, guys!

[Prasant]

You are most welcome.

[ppe29]

For what it’s worth, I changed the hover effect to the 3 buttons at the top of that same page that required a background change and a change to the font color, which is accomplished using just 1 additional line of code. Hopefully someone comes across this thread and finds this useful:

[friech]

Cool, thank you for sharing.

Have a nice day,