HTML button becomes square after background color is set on Chrome for Mac
WebKit/Blink draws buttons as "-webkit-appearance:push-button", which draws buttons with the native API (Cocoa in this case). However the native API doesn't support arbitrary background colors. So WebKit/Blink automatically removes "-webkit-appearance:push-button" internally and falls back to poor CSS drawing if a web author specifies some CSS properties such as background-color.
You can't change background color with the native button appearance.
I offer you to set your own Radius.In this way, the design of your button would be stable on every browsers and you won't face this problem again.
Use this style to works on every browsers.
-webkit-border-radius: 3px;-khtml-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;Be successful
you have to customized it using css. like this
input#bt1{border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:none;}input#bt1:hover{background:#ff0000; color:#fff}By using this you have set your markup like this
<html><body> <input type="button" id="bt1" value="Click me!"></body></html>