I would create a button like this (GetStarted button) in this page: http://www.behance.net/signup/
I don't know how create the blue background gradient button. I don't understand what are the css property to use.
Who can help me?
Thanks a lot.
CSS Linear GradientsTo create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.
A selection of gradient buttons that change the background-color when hovering. You can change the directon of the background change in the :hover state. Don't forget to then also change the background-color direction in the button itself.
To create a radial gradient that repeats so as to fill its container, use the repeating-radial-gradient() function instead. Because <gradient> s belong to the <image> data type, they can only be used where <image> s can be used.
Well, they used this in default state:
background: #0079FF;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0096FF), to(#005DFF));
background: -webkit-linear-gradient(0% 0%, 0% 100%, from(#0096FF), to(#005DFF));
background: -moz-linear-gradient(center top, #0096FF, #005DFF);
For hover they have other colors of course. Just change the color for your needs.
A working example: http://jsfiddle.net/KJN2V/1/
Just add the .button class to any element you wish
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With