[Solved] Button Styling Woes

[TC]

Hi all.
The button style I’m trying to achieve is:
Gray button with a golden outline with white centered text that when clicked it executes my Javascript. When you hover over the button it turns a lightish blue.

I almost have it working correctly but not quite. The text isn’t centered.

I think that’s the main problem. I may have extra CSS that’s not needed but since I’m new here I’m not sure.

Would appreciate any help you can offer.
If you find anything wrong or extra CSS please let me know.

Ok here’s a code pen post I hope I did it correctly.
http://codepen.io/TC_/pen/bEtsL

Thank you for your help.

[Paulie_D]

Please don’t drop a codedump on us like that. See the Tips box —->

Make a short example in a demo site like Codepen.io.

http://codepen.io/Paulie-D/pen/hiygx

[TC]

Please don’t drop a codedump on is like that. See the Tips box —->

Ok Paulie, I think I corrected it the way you like.

I’m curious if you guys don’t like code posted on the forum then why are there two code posting features?

Sorry for the inconvenience.

[Paulie_D]

I’m curious if you guys don’t like code posted on the forum then why are there two code posting features?

It’s not that we don’t like code….it’s like ice cream, a little goes a long way…but a lot will make you sick.

The code features are for short snippets of code…not so much code that we have to scroll down a couple of screens to read it all.

[Paulie_D]

You have a shipload of conflicting and overriding CSS declarations in there.

Multiple paddings / border-radius/ width/height etc….then you repeat half of it in the active / hover pseudo-classes

Trim it down until you have the basics down on the original button…then change only the properties that need to be changed for each pseudo class.

BTW when using a button text is automatically centered horizontally and vertically.

I’ve cleaned as much as I can so it’s possible I have stripped out something you actually wanted but some of it seemed a little odd.

http://codepen.io/Paulie-D/pen/sHwdm

[TC]

Wow thank you so much Paulie_D.

You guys on here are awesome.

One day I hope to be as good as you all.

You have a shipload of conflicting and overriding CSS declarations in there.

Yes, sorry about that. I learned CSS months ago then forgot some stuff while learning Javascript.
So I get confused and then over clutter.

I’ll get better the more I do it :)

Thanks again!

[Author]

Posts