Buttons With Gradient CSS

[CarraraWebsiteSolutions]

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

[Paulie_D]

>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?

[CarraraWebsiteSolutions]

@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.

[CrocoDillon]

.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)

[Author]

Posts