Is It Possible To Have 2 Different Background Colors For A Button (well Css Button)

What I want to achieve is something like this. :::::::::: ...hi.... .......... .......... The hi is in the middle of the 2 colors. I have it working for 1 color, and another color

Solution 1:

HTML:

<divclass="fancyButton"><divclass="background top"></div><divclass="background bottom"></div><p>hi</p></div>

CSS:

.fancyButton
{
    width:100px;
    position:relative;
}

.fancyButton.background
{
    width:100%;
    height:50%;
    position:absolute;
}

.fancyButton.background.top
{
    top:0;
    background-color:red;
}

.fancyButton.background.bottom
{
    bottom:0;
    background-color:blue;
}

.fancyButtonp
{
    position:relative;
    text-align:center;
}

Tested, and hopefully copy-pasted correctly. It uses a div that takes it's height from the <p> inside of it. The two backgrounds are set to the top and the bottom of the button div and are 50% of it's height so they meet nicely in the middle, no matter what height the button is. You can take out the fixed width and replace it with a left-right padding declaration for the button div if you want, so that the width is determined by the <p> too. (just realizing this and don't want to retest)

Nothing fancy; just solid, robust css!

Solution 2:

You can achieve this with multiple nested elements, although your mark-up will be less semantic.

Alternatively you can use gradients; this is a good resource for generating cross-browser CSS - http://www.colorzilla.com/gradient-editor/

Or you can use the CSS3 multiple background property, which is obviously not yet cross browser compliant. See this link for more info - http://www.zenelements.com/blog/css3-background-images/

If none of these help please show us the code for what you've achieved so far and it'll be easier to advise.

Solution 3:

You could create a css gradient with two stops really close to each other: firefox css gradients. It won't be cross browser yet. The second example on this page is pretty close to what you want: webkit simple gradients (only in webkit).

Solution 4:

Probably the only option here is to use CSS3 gradients as other answers have mentioned. However, if you do decide to use images (because some browsers don't support CSS3 for instanct), this tutorial about transparent sprites is very useful.