Button CSS question - Centering

[Pbalazs89]

Hi there,

I have a site here, with two buttons at the top.
One of the buttons has an icon next to it, and because of it will not position itself in the middle, how do I fix this?

http://www.coachingandfamily.com/

2. Near the bottom of the page, there are courses.

I added some custom classes, and would like to achieve it so that when I hover over either course, the .lilahover text turns purple. How can I achieve this via css?

Thanks!

[basanta]

Hi There,

Thanks for writing in!

You can use this CSS for the button.

.e12-18.x-anchor {
  position: relative;
}
.e12-18.x-anchor .x-graphic {
    position: absolute;
    right: 0px;
}

Regarding the text hover question. The text already changing the color on hover.

Not sure if you are looking for something else.

CSS for hover should be

.lilahover:hover {
color: rgb(82,57,255);
}

Hope this helps!

[Pbalazs89]

Hi there, the hover css worked, but the css for the button only partially,

Actually, the button isn’t working 100%. The text is centered in the button however, the centering does not take into account the graphic next to it. Is there a way to make it so that they both are centered? What I mean here is that there’s the same amount of free space on the right and the left of the button so it looks symmetric.

Thanks!

[basanta]

Hi There,

Thanks for writing again!

Please add this CSS.

.e12-18.x-anchor .x-anchor-text {
     margin: 5px 5px 5px -22px !important;
}

Hope this works!

[Pbalazs89]

Thanks for the help!

[thai]

Hi There,

I recommend you to use the custom CSS class instead, the .e12-18 class will change if you move your button to another sections. I could see that you’ve already added the sliderbutton class to your button.

So the custom CSS for the button should be like this:

.sliderbutton.x-anchor {
  position: relative;
}
.sliderbutton.x-anchor .x-graphic {
    position: absolute;
    right: 0px;
}
.sliderbutton.x-anchor .x-anchor-text {
     margin: 5px 5px 5px -22px !important;
}

Regards!