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

Bluegrass

duplicate of #4094944 – Miler

@sylwia boredom. I use gradients for a lot of things. I thought that two, similar, solid colors might give a sharper feel. – Bluegrass

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.

Hols

Fantastic answer. I did consider that it was some kind of white transparency but had no idea how I would of implemented that. It does the job and gets my vote! Thank you – Bluegrass

Answer 2

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

Tenaculum

exactly the kind of thing I am looking for, however, I have a :hover transitioned background effect that this code seems to stop working. The idea being that the button would be the two shades of blue and then on hover would transition to the two shades of grey. – Bluegrass

Answer 3

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>

Pieper

Yeah this seems a lot better. In order to change every button on my website how could we use this method to accommodate the syntax I have used throughout a particular site: <button class="submit"></button> – Bluegrass

The .text would be the button, the other 2 elements would be any other tag you feel is most semantic. div, span or anything along those lines. Personally, the gradient option is preferred by me and should be the accepted answer. I was just providing a more concise/semantic version of the link provided by a comment to your initial post. – Pieper

if you already want to walk this path ... then you could as well use some css3 pseudo objects to keep the markup clean of obnoxious tags like <div class="background top"></div>. something in this direction ^_^ – Grimona

Nice shout Martin. I am just used to catering for the browser(s) who shall not be named. ;) – Pieper

Answer 4

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/

Lowndes

This solution also stop the background transition from working. Any ideas? – Bluegrass

Answer 5

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;
}

Proscription

I like what you have done there. Love the simplicity, however, you can see that it is two gradients. I am looking for a comprehensive professional solution. Fantastic tool though thank you making me aware of it, – Bluegrass

Microsoft have a similar tool maybe you may like to compare them: ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker – Bluegrass

Answer 6

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.

Diez