CODEWITHSUNDEEP
cssbuttonbackground-color
Paul
Paul

Reputation: 257

CSS making a button's background-color two different solid colors NOT gradient

How could I make a background of a button two solid colors? Please see examples below.

The overall aim is for the button to transition from the two shades of blue to the two shades of grey upon hover.

background two solid colors on hover

Colors:

HTML button syntax: <button class="submit"></submit>

CSS:

button.submit {
        [background CSS from this question] }

button.submit:hover {
        [background CSS from this question with alternate colors]
        cursor: pointer; 
        -webkit-transition: background 0.5s linear;
        -moz-transition: background 0.5s linear;
        -ms-transition: background 0.5s linear;
        -o-transition: background 0.5s linear;
        transition: background 0.5s linear;
}

Feel free to use this JSFiddle I have setup for this query: https://jsfiddle.net/DMc9N/

Your help is hugely appreciated

Upvotes: 5

Views: 29786

Answers (6)

2ne
2ne

Reputation: 5986

You can do this by setting 2 locations of the gradients to the same value. In your example it would be 2 50% values.

Blue

background: linear-gradient(to bottom, #4098d3 0%,#4098d3 50%,#2b8dcf 50%,#2b8dcf 100%);

Grey

background: linear-gradient(to bottom, #515758 0%,#515758 50%,#2B8DCF 50%,#2B8DCF 100%);

Demo on jsfiddle https://jsfiddle.net/mm3Rz/

Upvotes: 1

seemly
seemly

Reputation: 1090

Less HTML and slightly more semantic example than the one given in the link to another stackoverflow answer in the comments:

https://jsfiddle.net/63Esq/2/

.fancyButton {
    width:100px;
    display:inline-block;
    position:relative;
    background-color:#2B8DCF;
}
.fancyButton span {
    width:100%;
    display:inline-block;
    position:absolute;
}
.fancyButton .bg {
    height:50%;
    top:0;
    background-color:#4098D3 ;
}
.fancyButton .text {
    position:relative;
    text-align:center;
    color:#fff;
}

<a href="#" class="fancyButton">
    <span class="bg"></span>
    <span class="text">hi</span>
</a>

Upvotes: 1

vals
vals

Reputation: 64174

Chovanec has part of the answer, the problem is that you can not animate gradients.

A compromise that can give you good results is to specify the color as usual, and then put over it a semitransparent white gradient.

button.submit {
    background-color: #4098d3;
    color: #fff;
    background-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.5) 51%);

}

In the bottom half, the final color will be the one that you set. In the upper half, it will be lighter as it gets blended with the white of the gradient.

That's enough to make it work, see the Demo

To make the upper half lighter or darker, you need to adjust the last 0.5 in the background-image.

The only down side is that you don't have precise control over the light gray in the hover state, it will be whatever it happens to be. You can set also a background-image in the hover state, for instance

button.submit:hover {
    background-color: #515758;
    background-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.7) 51%);
    ...

But that will not be transitioned (however, the effect is good enough if the difference is not too high)

By the way, this technique is also used when you want several elements to have the same 2-color look, but changing the base color. You set the color in one class, and the gradient in another.

Upvotes: 10

Medda86
Medda86

Reputation: 1630

css3 you can try something like:

box-shadow: inset 0px 24px 0px rgba(255, 255, 255, 0.14);

to give the shadown on the inside of the box, pretty neat.

Upvotes: 1

Sakata Gintoki
Sakata Gintoki

Reputation: 1825

The best choose for you: http://colorzilla.com/gradient-editor/ Support all browser web. :)

If you want to perfect for display, i think you can slice image background. May be like this:

First: slice your background image with size: width = 1px; height = height of your image and save with PNG format for best size and quality.

Second: Css for your button

button.submit {
        background: url(your-background.png) repeat-x left center; }

button.submit:hover {
        background: url(your-background-hover.png) repeat-x left center;
        cursor: pointer; 
        -webkit-transition: background 0.5s linear;
        -moz-transition: background 0.5s linear;
        -ms-transition: background 0.5s linear;
        -o-transition: background 0.5s linear;
        transition: background 0.5s linear;
}

Upvotes: 1

Michal
Michal

Reputation: 3642

Use this type of gradient set:

background: #2989d8; /* Old browsers */
background: -moz-linear-gradient(top, #2989d8 50%, #207cca 51%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#2989d8), color-stop(51%,#207cca)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2989d8 50%,#207cca 51%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2989d8 50%,#207cca 51%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #2989d8 50%,#207cca 51%); /* IE10+ */
background: linear-gradient(to bottom, #2989d8 50%,#207cca 51%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#207cca',GradientType=0 ); /* IE6-9 */

http://codepen.io/Chovanec/pen/qALes

Upvotes: 4

Related Questions