how to adjust "arrows" on buttons?

[radiantaction]

Hi,
I tried replicating the default button style in a pricing table. I was able to get it “almost” right but the arrow overlaps the word. It is very lightly showing like this in Windows with Chrome/Firefox but prominently an issue on mac/safari.

I’ve racked my brain, reviewed the css file, and “inspected” the elemnt various ways and I can’t seem to find what needs to be adjusted. I know I’ve missed something.

Can anyone help point me in the right direction?

The page is here > http://dev5.khtestsite.com/prices/

Thank you!

[Davinder Singh Kanith]

Hi Kristen

Arrows on hover on Pricing table “details” button seem to appear fine on Windows. Did you manage to fix the issue? If not, please elaborate (preferably with screenshot of issue on Mac system).

[radiantaction]

Hi Davinder,
Nope, I haven’t fixed it. In Windows the arrow being too close is very, very light and difficult to see. However, when viewing on a mac in safari it is quite apparent.

Here is a link to a short (10 sec) screencast shot in Safari (it shows that same in safari whether in Windows or mac).

http://screencast-o-matic.com/watch/cojbeofzNs

Thank you for your help on this!

Kirsten

[Davinder Singh Kanith]

Hi Kristen

I believe best fix would be removing hover arrow and left movement on the button. Try this code in style.css file.

a.button1:after, a.button2:after, a.button3:after, a.button4:after { display: none; }
a.button1:hover, a.button2:hover, a.button3:hover, a.button4:hover { padding: 10px 18px; }

[Author]

Posts