CODEWITHSUNDEEP
css
Genadinik
Genadinik

Reputation: 18649

CSS button does not render as a button

I have this code

.sidebar-button
{
    color:#ffffff;
    background-color:#ff9933;
    background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#ffae5e), to(#ff9933));
    background-image:-moz-linear-gradient(top, #ffae5e, #ff9933);background-image:-ms-linear-gradient(top, #ffae5e, #ff9933);
    background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffae5e), color-stop(100%, #ff9933));
    background-image:-webkit-linear-gradient(top, #ffae5e, #ff9933);background-image:-o-linear-gradient(top, #ffae5e, #ff9933);
    background-image:linear-gradient(top, #ffae5e, #ff9933);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffae5e', endColorstr='#ff9933', GradientType=0);
    text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#ff9933 #ff9933 #ff8000;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

but it renders as text with orange background. Any idea why it doesn't render correctly? Am I missing something?

Upvotes: 1

Views: 124

Answers (2)

user1337
user1337

Reputation: 847

Once you start styling it, you have to style it completely. It doesn't inherit the basic button attributes. You can also use something like this http://css-tricks.com/examples/ButtonMaker/ to quickly create more detailed buttons.

Upvotes: 1

John Riselvato
John Riselvato

Reputation: 12924

height: 30px;
width: 100px;

You need to make the width and height of the button: http://jsfiddle.net/uJR2t/

Upvotes: 4

Related Questions