css - fomatting button with attractive css3 properties

Question

I am not good at css but have created css button looks pretty good.

But it does not give shining like buttons in Yahoo mail or button @ http://www.alchemyapi.com/products/demo/

Here is my fiddle demo:

http://jsfiddle.net/karimkhan/y6XGg/

I appreciate if some can help me to beautify it!

<input type="submit" class="button" onclick="GetSentiment()" id="GetSentiment" value="Get Sentiment" />

Does it css or css3? what's different

Answer 1

They are using a gradient, which can be done by using an image or css3 like this:

background-image: linear-gradient(bottom, rgb(150,150,150) 43%, rgb(179,179,179) 72%);
background-image: -o-linear-gradient(bottom, rgb(150,150,150) 43%, rgb(179,179,179) 72%);
background-image: -moz-linear-gradient(bottom, rgb(150,150,150) 43%, rgb(179,179,179) 72%);
background-image: -webkit-linear-gradient(bottom, rgb(150,150,150) 43%, rgb(179,179,179) 72%);
background-image: -ms-linear-gradient(bottom, rgb(150,150,150) 43%, rgb(179,179,179) 72%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.43, rgb(150,150,150)),
    color-stop(0.72, rgb(179,179,179))
);

There are many gradient generators online like: http://gradients.glrzad.com/

Answer 2

In your css

 background: -webkit-gradient(linear, 0 0, 0 100%, from(#F70247), to(#F70247));
 background: -moz-linear-gradient(top, #F70247, #F70247);
 -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#F70247, endColorStr=#F70247);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#F70247, endColorStr=#F70247);
 display:inline-block; /* IE is so silly */
 }

Your your gradient goes from #F70247 to #F70247 so no gradient you have to change one of these color values to another that please you

Answer 3

Your current background has a gradient which goes from one colour to the exact same colour (meaning no gradient is even applied).

background: -webkit-gradient(linear, 0 0, 0 100%, from(#F70247), to(#F70247));
background: -moz-linear-gradient(top, #F70247, #F70247);
/* Etc... */

Is absolutely no different to:

background: #F70247;

Your start and end colours are both #F70247. If we change one of your colours to something different, we can generate a gradient (JSFiddle demo):

 background: -webkit-gradient(linear, 0 0, 0 100%, from(#F70247), to(#EEE));
 background: -moz-linear-gradient(top, #F70247, #EEE);
/* Etc... */

Here we're going from #F70247 to #EEE.

Colorzilla's Ultimate CSS Gradient Generator is a WYSIWYG for generating CSS gradient backgrounds which are compatible with old and new browsers. I'd strongly suggest using that if you wish to create a gradient similar to the one you linked.

Answer 4

It looks like the gradient on your demo is going from one colour, to the same colour, therefore, not really producing a gradient at all !

Look at this: http://jsfiddle.net/y6XGg/1/

 background: linear-gradient(to bottom, #febbbb 0%,#fe9090 45%,#ff5c5c 100%);

Useful link : http://www.colorzilla.com/gradient-editor/

Answer 5

You can use multiple inset shadows to get some of the effects you're looking for, see: http://jsfiddle.net/y6XGg/2/

     -webkit-box-shadow: 0px 1px 3px #666666, 0px 0px 6px #F3215F inset, 0px 1px 0px #EDC2DE inset;
     -moz-box-shadow: 0px 1px 3px #666666, 0px 0px 6px #F3215F inset, 0px 1px 0px #EDC2DE inset;
     box-shadow: 0px 1px 3px #666666, 0px 0px 6px #F3215F inset, 0px 1px 0px #EDC2DE inset;

Your background gradient can be tweaked too to make a stronger effect.

Answer 6

You could simply go to http://cssgradientbutton.com/# and generate a button from there. You can edit the button and increase the border radius size to change the rounding of the corners to match your jsfiddle. It also generates css for when you hover over the button, giving it the feel of being pushed in slightly.

You can also add inset shadows, which can give a nice look:

Before hover:

On hover: