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;