Removing the shadow from a button

Question

The button I want is the one at bottom, but the one I have is the top.

The problem arises from the fact that the top button in HTML:

<form class="button_to" method="get" action="/"><input type="submit" value="Ok" /></form>

and the bottom button in HTML:

<button type="button">Ok</button>

The CSS for the top button is:

.signup-success input[type="submit"],
.signup-success input[type="submit"]:active,
.signup-success input[type="submit"]:focus {
  width: 80%;
  background: transparent;
  color: #00AA66;
  border-color: #00AA66;
}

The CSS for the bottom button is:

.signup-success button,
.signup-success button:active,
.signup-success button:focus {
  margin-top: 15px;
  width: 80%;
  background: transparent;
  color: #00AA66;
  border-color: #00AA66;
}

If it helps the top button is generated from rails .erb extension

<%= button_to "Ok", root_path, :method => :get %>

Help me to get my top button look like bottom button. I've tried to put in code that disable shadows in CSS, but it didn't work :(

Answer 1

Use border-style:

.signup-success input[type="submit"],
.signup-success input[type="submit"]:active,
.signup-success input[type="submit"]:focus {
  width: 80%;
  background: transparent;
  color: #00AA66;
  border-color: #00AA66;
  border-style: solid;
}

or combined version (border-style, border-width and border-color in one):

border: 2px solid #00AA66;