去除按钮的阴影

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;

Answer 2

或者你可以简单地给你的按钮设置border: none

Answer 3

为按钮添加边框修复了 safari 奇怪的阴影，这很有趣。

 border: 1px solid #34c1e5;

Answer 4

Just add a border of your own.

border: 1px solid black;

Or remove the border.

border: none;