CODEWITHSUNDEEP
htmlcss
Ian Vink
Ian Vink

Reputation: 68790

CSS with a 2 gradient button?

Below is an image of a button we use on our site, it's a .png.

We'd like to see if we can get really close to it with CSS on a standard button.

The gradient goes top: #E14C5B to middle: #D33742 to bottom: #B61C27 with a couple pixel radial of round corners.

Is that even possible in CSS?

enter image description here

Upvotes: 0

Views: 125

Answers (2)

service-paradis
service-paradis

Reputation: 3398

Here is the cross-browser version using css gradient. I specified 4 colors for the gradient. The first gradient from 0 to 50% and the second gradient from 51% to 100%.

Ex.

background: linear-gradient(to bottom, #f64757 0%,#f83b49 50%,#eb2735 51%,#ce0011 100%);

Button using css gradient only

jsfiddle demo here

Please note that the red i took are brighter than in tour example. Just play with the css to adjust colors that fit your needs.

Upvotes: 1

brbcoding
brbcoding

Reputation: 13596

I'll get ya started...

HTML

<button>Submit</button>

CSS with some background gradients

@import url(http://fonts.googleapis.com/css?family=Pathway+Gothic+One);
button {
    font-family: 'Pathway Gothic One', sans-serif;
    font-size: 1.5em;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
    border: 1px solid transparent;
    border-radius: 3px;
    height: 50px;
    width: 100px;
    color: white;
    background-repeat: repeat-x;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E14C5B), color-stop(0.5, #D33742), to(#B61C27));
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

DEMO

Screenshot:

Button

If you want some kind of clicky feedback type look on click, you could also add:

button:active {
    -webkit-transform: translate(1px, 1px);
    box-shadow: none;
}

DEMO w/ :active

This is only prefixed for -webkit browsers. You'll need to provide the proper vendor prefixes for whatever you are supporting.

Upvotes: 1

Related Questions