Foro de elhacker.net

Buenas Noches

Tengo un problema. Estoy copiando un código de un login form. El problema de este código es que asigna para todos los elementos button y los inputs un estilo particular. El problema es que tengo otros botones en mi css y que no quiero que me los cambie.
He intentado varias formas como poner una clase a los botones y los inputs nuevos, pero de alguna manera no me esta funcionando..
En definitiva el código que asigna a todo la misma clase es el siguiente.

/* Full-width input fields */
input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
 
/* Set a style for all buttons */
button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
}
 
button:hover {
  opacity: 0.8;
}

He intentado hacer lo siguiente, poner una clase a el elemento button

 <button class="botoncito" onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>

y luego en el css poner

.botoncito button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
}

Pero no sirve. Soy nuevo en esto, y lo que es que evite que ese estilo se propague por todo los botones e inputs de mi pagina.

Lo que está pasando es que le estas poniendo una clase a un botón "botoncito" hasta ahí vamos bien, pero después hace esto...

.botoncito button {
    // [...]
}
 
// Simplemente hace
.botoncito {
    // [...]
}
 

A ver si te entiendo, queres aplicarle un estilo a todos tu botones e inputs de tipo text menos a los botones con la clase botoncito?
 En ese caso podrias aplicar el selector :not de css3

/* Full-width input fields */
input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
 
/* Set a style for all buttons  (excepto para .botoncito) */
button:not([class=botoncito]) {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
}
 
button:hover {
  opacity: 0.8;
}
 

Y por cierto, en el segundo caso tenes los selectores invertidos, lo correcto seria asi:

button.botoncito {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
}
 

Ejemplo online --> https://codepen.io/l-pez-faku/pen/MWKvbKQ

guia rapida sobre los selectores:

button.botoncito => aplica los estilos a todo elemento button que tenga la clase botoncito
button .botoncito => (con espacio entre ambos) aplica los estilos cualquier elemento que tenga la clase botoncito y que este dentro de un button, pero no necesariamente un hijo directo.
button > .botoncito => aplica los estilos cualquier elemento que tenga la clase botoncito y que sea un hijo directo de un button.

https://developer.mozilla.org/es/docs/Web/CSS/Selectores_CSS
https://lenguajecss.com/css/