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

Question

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.

Colors:

• blue: #4098D3 (light), #2B8DCF (dark)
• grey: #515758 (light), #2B8DCF (dark)

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

Answer 1

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.