Customized button in my website

Hi,
Go to the style.css of your child theme and make the modifications. It will override the code in the parent theme’s style.css

For example, if you put this in your child theme’s style.css the color of the buttons will change.

.btn-primary {
 background-image: linear-gradient(to bottom,#ff0000,#1b8d71);
}

Hi,
I have added that core to the child theme’s style.css but I do not understand why it has no effect :s
Would you have an idea ?
Thanks

Hi,
What code did you add? I mean the colours.
I want to check if the code is in place.

Hi,

I have put that in the style.css of the child theme
.btn-primary {
background-image: linear-gradient(to bottom,#fff,#fff);
color: white;
}

Thanks

Hi,
You seem to have multiple declarations for the colour of .btn-primary in the child theme’s style.css. Please ensure that this is the only colour.

Hi, indeed, I did a customized template months ago and I forgot about it…
I have updated all the classes involving a btn with a white colour as background but no effect ??
Thanks !

Hi,
Line nos 157,165 and 194 of your child theme’s style.css still have references to btn-primary
with #1d58ba as the colour.

Hi Menaka,

thanks a lot for your support, the look of the buttons is much better now ! I had a caching pb with chrome that was not properly refreshing the pages to see the changes.

I now have 3 tiny issues that I ll try to solve by myself hover behavior, menu button alignment and footer button text color).

Thanks a lot for your great support !

Hi,

There are 2 tiny details that I cannot manage to solve…

In the header menu, the button style is fine but on hover, the background is blue and text is blury while buttons in the page are with clear text and orange background.

In the footer menu, the button text is not appearing grey but white.

It probably has something to do with header menu and footer widget css but can’t manage to find how to update it ??

Any clue ?

thanks again

Hi,
For the first one, you have some block of code like this in the parent theme’s style, which you need to override in the child theme’s style.css. So, add this and change to suitable colours

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
  color: #ffffff;
  background-color: #005580;
  *background-color: #004466;
}
.btn-primary:active,
.btn-primary.active {
  background-color: #00334d \9;
}

• This reply was modified 8 years, 3 months ago by Menaka S..

Hi,

it’s almost good…
i have a text-shadow in blue now on hover although I have put “text-shadow: none” about everywhere

Thanks !