How to make a input submit button with flat look?

Question

Here I have a submit button:

<input type="submit" value="submit" /> 

And I want to add some additional styles to make it a flat look:

input {     border: 0;     background: none;     -webkit-appearance: none; } 

This is how it looks afterwards:

However, if you look carefully, there is still some border on the top of the submit button...... Is there some way to remove the sunken or raised surface and make it a plain flat look?

Answer 1

You will need to set border, box-shadow and background to 0/none to remove any greyish appearance as seen on button. Then to remove the rounded corners set border-radius to 0px.

Rules are :

input[type="submit"]   /* Or better yet try giving an ID or class if possible*/ {  border: 0;  background: none;  box-shadow: none;  border-radius: 0px; } 

Answer 2

outline: none; would be my first guess.

And also you would probably want to remove the :focus state and :hover state as so

input[type="submit"]:focus { background:none; outline: none; border:none; }   input[type="submit"]:hover { background: none; border: none; outline: none; box-shadow: none; } 

this makes it so when it is pressed, it won't have an emphasized outline.

if it doesn't work try removing other styles such as box-shadow:none;, border-radius:none;.