Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css gradient background button

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.

like image 441
michele Avatar asked Aug 31 '12 21:08

michele


People also ask

Can you make a gradient background in CSS?

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.

What is gradient button?

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.

How do you make a radial gradient in CSS?

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.


2 Answers

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.

like image 195
Loolooii Avatar answered Sep 21 '22 22:09

Loolooii


A working example: http://jsfiddle.net/KJN2V/1/

Just add the .button class to any element you wish

like image 28
Slavenko Miljic Avatar answered Sep 18 '22 22:09

Slavenko Miljic