CODEWITHSUNDEEP
htmlcssbuttoninputgradient
michele
michele

Reputation: 26598

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.

Upvotes: 6

Views: 11531

Answers (3)

Sashini Hettiarachchi
Sashini Hettiarachchi

Reputation: 1708

I used this for creating a gradient button.   
<style>
        .my-gradient-btn {
            border-radius: 40px;
            opacity: 0.5;
            background: linear-gradient(to right, red, yellow);
        }
       </style>

enter image description here

Upvotes: 0

Loolooii
Loolooii

Reputation: 9172

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.

Upvotes: 6

Slavenko Miljic
Slavenko Miljic

Reputation: 3856

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

Just add the .button class to any element you wish

Upvotes: 1

Related Questions