web-dev-qa-db-fra.com

Suppression de l'ombre d'un bouton

Le bouton que je veux est celui du bas, mais celui que j'ai est le haut.

enter image description here

Le problème vient du fait que le bouton du haut en HTML:

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

et le bouton du bas en HTML:

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

Le CSS du bouton du haut est:

.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;
}

Le CSS du bouton du bas est:

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

Si cela aide, le bouton du haut est généré à partir de l'extension Rails .erb

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

Aidez-moi à faire ressembler mon bouton du haut au bouton du bas. J'ai essayé de mettre du code qui désactive les ombres en CSS, mais cela n'a pas fonctionné :(

htmlcssruby-on-railsshadow
13
LarsChung

Utilisez un style de bordure:

.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;
}

ou version combinée (style de bordure, largeur de bordure et couleur de bordure en un):

border: 2px solid #00AA66;
18
Jevgenijs Šulins

Ou vous pouvez simplement donner border: none à votre bouton

2
Aayushi

Assez drôle, ajouter une bordure au bouton a fixé l'ombre portée étrange du safari.

border: 1px solid #34c1e5;
0
Dan Kaiser