Grow your CSS skills. Land your dream job.

Having Problems with CSS Buttons

  • # May 22, 2013 at 2:05 am

    Hi all,

    I am having problems with getting my CSS buttons to mouseover through the whole entire background color rather than just the text itself.

    You can find it at http://www.esiroundtable.org (the 4 blue buttons on the right).

    I’ve tried display:table and display:table-cell but to no avail.

    Hope you guys can help me.

    Here’s the CSS code…

    #custom_post_widget-4, #custom_post_widget-6 {

    background-color: #00529c;

    font-family: MyriadProBold;

    font-size: 210%;

    margin-top: 10px;

    padding-bottom: 20px;

    padding-top: 20px;

    text-align: center;

    text-transform: uppercase;

    border-radius: 20px;

    }

    #custom_post_widget-4 a, #custom_post_widget-6 a {

    text-decoration: none;

    color: #fff;

    }

    Any help would be greatly appreciated!

    Thank you,
    Robert

    # May 22, 2013 at 2:10 am

    I’m not seeing a `:hover` state in there.

    # May 22, 2013 at 2:12 am

    Oh I guess I’m missing that. Hmm…what would I put in there besides a background color change (which I would love to do after I figure this out?)

    I’m thinking my whole code is completely messed up but I’m not sure where to start.

    # May 22, 2013 at 2:15 am

    >Hmm…what would I put in there besides a background color change

    Whatever you want to change…it’s entirely up to you.

    # May 22, 2013 at 2:16 am

    Is there something other than that I need? I tried display:table-cell and display:table and it got funky when you mouseover it.

    # May 22, 2013 at 2:22 am

    > I tried display:table-cell and display:table

    What are you trying to do? In general those aren’t properties I would associate with a hover.

    # May 22, 2013 at 2:23 am

    When you mouseover the text you can click on it and go to another page, but I am wondering if you can mouseover anywhere in that button, not just the text to go to the page the button is associated with.

    Rather than create an image, I was thinking CSS.

    # May 22, 2013 at 2:31 am

    So you need the link to be as big as the button?

    Firstly try adding `display:block` to the `a` element.

    Because of the odd way some of the buttons are structured (list item with a p with multiple links inside) you may need to adjust some of the CSS properties &/or restructure the HTML.

    # May 22, 2013 at 2:33 am

    Exactly. I’ll try that.

    I figured the p was probably what was doing it. Unfortunately I am using WordPress and they keep insisting on adding that in the widget block :(

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".