Button Hover – cannot edit CSS

Fresz1990
(@fresz1990)

9 years, 5 months ago

Hello,

I have WooCommerce installed on Custom Community and after adding products the buttons look normal as they should but when you hover over them they change.

I cannot find where to change then or remove the hover option from it…

website: eastcosttuning.ie

Viewing 4 replies - 1 through 4 (of 4 total)

Thread Starter Fresz1990
(@fresz1990)

9 years, 5 months ago

So no support for this template anymore?

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

9 years, 5 months ago

Not true, all themes distributed on WordPress.org are open for support.

If you’re finding people aren’t answering then try to re-explain your problem, provide screenshots, illustrate it clearer.

Also make sure you link the correct website.
CrouchingBruin
(@crouchingbruin)

9 years, 5 months ago
There are many themes which have a separate support forum. For example, if you read the Description on the theme’s front page, down towards the bottom you’ll see that the main support forum is here. Sometimes the problem isn’t with the theme, but with the plugin, so you have to decide which support forum you’re going to post on, the theme’s or the plugin’s.

For your particular problem, don’t edit the theme files directly, but use a CSS plugin like JetPack or Custom CSS Manager.

Then create a new rule for the hovered button by copying all of the properties for the non-hover rule and using the selector for the hover rule:
```
.woocommerce a.button:hover {
   font-size: 100%;
   margin: 0;
   line-height: 1em;
   cursor: pointer;
   position: relative;
   font-family: inherit;
   text-decoration: none;
   overflow: visible;
   padding: 6px 10px;
   font-weight: bold;
   -webkit-border-radius: 2px;
   border-radius: 2px;
   left: auto;
   text-shadow: 0 1px 0 #ffffff;
   color: #5e5e5e;
   text-shadow: 0 1px 0 rgba(255,255,255,0.8);
   border: 1px solid #c7c0c7;
   background: #f7f6f7;
   background: -webkit-gradient(linear,left top,left bottom,from(#f7f6f7),to(#dfdbdf));
   background: -webkit-linear-gradient(#f7f6f7,#dfdbdf);
   background: -moz-linear-gradient(center top,#f7f6f7 0%,#dfdbdf 100%);
   background: -moz-gradient(center top,#f7f6f7 0%,#dfdbdf 100%);
   white-space: nowrap;
   display: inline-block;
   -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.075),
   inset 0 1px 0 rgba(255,255,255,0.3),
   0 1px 2px rgba(0,0,0,0.1);
   -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.075),
   inset 0 1px 0 rgba(255,255,255,0.3),
   0 1px 2px rgba(0,0,0,0.1);
   box-shadow: inset 0 -1px 0 rgba(0,0,0,0.075),
   inset 0 1px 0 rgba(255,255,255,0.3),
   0 1px 2px rgba(0,0,0,0.1);
}
```
That should give you a good base from which to start.
Thread Starter Fresz1990
(@fresz1990)

9 years, 5 months ago

Thanks a lot!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Button Hover – cannot edit CSS’ is closed to new replies.

Tags