Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Button Styling Woes

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #186233
    TC
    Participant

    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.

    #186235
    Paulie_D
    Member

    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

    #186237
    TC
    Participant

    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.

    #186239
    Paulie_D
    Member

    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.

    #186241
    Paulie_D
    Member

    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

    #186250
    TC
    Participant

    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!

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.