HTML button (part of button is dark)

Question

I have a button in my application and currently its very basic:

<button style="height:150px;width:150px;border-radius:10px;">Hello,World</button>

Which means it has the default HTML CSS effects used w/it. I was attempting to change it w/CSS but everytime I make the button bigger, there's always this dark side on the right and bottom side..I'm not sure why. If I change it back to its default, its not there.

Here is the JSFiddle:

http://jsfiddle.net/htzgak6g/1/

I'm referring to the right side and bottom side. They seem darker to me than the other sides. All I want to do is have some type of button with rounded corners and a nice shade of color.

Answer 1

This is because buttons come with some basic default browser styles that are still taking effect because you haven't over-ridden them.

In this case, adding border: none will remove the border and the dark colour. (http://jsfiddle.net/htzgak6g/2/)

Look at a reset css to solve these problems and give a consistent blank slate across browsers.

Answer 2

Just add border-style:none; like so:

<button style="height:150px;width:150px;border-radius:10px;border-style:none;">Hello,World</button>

Here is your updated JSfiddle