CODEWITHSUNDEEP
htmlcss
Victoria
Victoria

Reputation: 505

CSS change only background color for a button

Following code, buttons different only by one style setting, produces dramatically different button looks. Not only is the background color changed, but also the border style, rounded corners, and gradient. I guess losing the gradient isn't too surprising, but the others are, to me. Can anyone explain why? Output of following code is viewable here. I found lots of "solutions" for how to style the button like the default, but why does the default change so dramatically when just trying to change the background color?

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="favicon-index.ico" type="image/x-icon" rel="shortcut icon">
<link href="/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>test buttons</h1>
<input type="button" value="gradient">
<input type="button" value="background-color" style="background-color: #ff0;">
</body>
</html>

Upvotes: 0

Views: 3583

Answers (1)

Paperclip
Paperclip

Reputation: 708

It has to do something how browser renders them. When no styles are applied it uses the native os style. But when style is applied it must draw it from the beginning. since you are only setting the background value, the border and other style attributes are used from browser defaults.

On every os and browser the native buttons look a little different, but with same styles they look the same.

Upvotes: 1

Related Questions