Grow your CSS skills. Land your dream job.

Buttons With Gradient CSS

  • # April 16, 2013 at 5:32 am

    I have made buttons in illustrator with small gradient at top. ass seen in this image http://s16.postimg.org/931t4vqn9/My_Buttons.png

    Also have made a sample HTML Code with out gradient at top white like image link

    http://codepen.io/mwbcomputers/pen/BClmw

    Also have alined text in center but still looks out to me think it might be something to do with padding

    # April 16, 2013 at 5:44 am

    >Also have alined text in center but still looks out to me think it might be something to do with padding

    Well…yes, you have this:

    padding: 0px 0px 0px 4px;

    However, what does that have to do with gradients?

    # April 16, 2013 at 5:52 am

    @Paulie_D change it before to the padding: 0px 0px 0px 4px; it worked new it was something like that but there is know way can remove or edit previous comment to change it

    Now just trying to work out how to get my buttons with a little white gradient on top non of the searches I have been doing have been not good.

    # April 16, 2013 at 6:07 am

    .links a {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0.5));
    }

    That gives the little white, and a black overlay to create the shadow. If you want better shadow you probably have to set it per class. Oh and change the background properties per class to background-color properties, else they overwrite the gradient.

    Plus vendor prefixes as: http://css3please.com/ (would have to look up how old webkit syntax works with gradient stops though)

    # April 16, 2013 at 6:07 am

    You could use a number of factors to get that effect – a combination of css gradients, a little inner shadow (only if needed), and different colors for the border (give the top border a light color to mimic the highlight effect)

    Here’s an old code pen example, check the green button at the bottom
    [
    http://codepen.io/Krish1980/pen/yrnGb(http://codepen.io/Krish1980/pen/yrnGb “”)

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

You must be logged in to reply to this topic.

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