CODEWITHSUNDEEP
cssbutton
Makeda
Makeda

Reputation: 47

Style for button

How can I change a default style for button if I use webkit-appearance:button. I like to do something like this.

div {

      webkit-appearance:button
      background: linear-gradient(180deg, rgba(145,200,242,1) 0, rgba(137,163,200,1) 100%);

}

Upvotes: 0

Views: 134

Answers (3)

Jacob G
Jacob G

Reputation: 14162

There are several problems with your code. First, there is no - in front of webkit:

-webkit-appearance:button

Second you have no ending semicolon on -webkit-apperance:button; and no browser prefix wich is needed for a chrome gradient:

div {

      webkit-appearance:button
      background: linear-gradient(180deg, rgba(145,200,242,1) 0, rgba(137,163,200,1) 100%);

}

Fix your coding to this:

div {

      -webkit-appearance:button;
      background: -webkit-linear-gradient(180deg, rgba(145,200,242,1) 0, rgba(137,163,200,1) 100%);

}

JSFiddle
Also, as other have said, if you use apperance:button; and try to edit it with CSS, the appearance no longer works. If you want the look of a button, use the <button> element.

Upvotes: 0

miimario
miimario

Reputation: 1

I think the way you are trying to select the button is wrong. If you want to style a regular <button> element with a linear gradient your CSS selector needs to be as follows:

HTML

<button>Hello World</button>

CSS

button {
    background: linear-gradient(180deg, rgba(145,200,242,1) 0, rgba(137,163,200,1) 100%);
}

Example: http://jsfiddle.net/85hpd/

Upvotes: 0

evu
evu

Reputation: 1071

That doesn't work. -webkit-appearance is used to change the default appearance of something, it's usually set to none. If you want it to look and behave like a default button, use a <button> element. Otherwise, remove the webkit appearance and just style it however you wish.

Upvotes: 1

Related Questions