Hola estoy aprendiendo css y tengo un problema al centrar un botón de un formulario acá dejo el código para que vean. Muchas gracias!
codigo HTML :
<body>
<footer>
<section class="contacto">
<h2>Contacto</h2>
<form class="contacto" action="">
<input type="text" placeholder="Nombre:" maxlength="25" required name="nombre">
<input type="email" placeholder="Email:" maxlength="40" required name="email">
<br/>
<textarea name="mensaje" id="mensaje" placeholder="Mensaje:"></textarea>
<br>
<input type="Submit" value="Enviar" name="btnEnviar">
</form>
</section>
<section class="redes-sociales">
</section>
</footer>
</body>
Codigo CSS:
*{
padding: 0;
margin:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*PAra el formulario*/
.contacto{
background: #fff;
width: 500px;
margin: 20px auto;
padding: 20px;
border-radius: 5px;
}
/*Para los input del nombre y del email */
.contacto input[type="text"],
.contacto input[type="email"],
.contacto textarea{
width: 100%;
padding: 20px;
margin-bottom: 20px;
border-radius: 3px;
border: 1px solid #226fc1;
font-family: Arial;
font-size: 16px;
}
.contacto textarea{
min-height: 120px;
max-height: 300px;
min-width: 100%;
max-width: 100%;
}
/*Cuando hacemos focus en los input de texto, email y el area de texto va a agregarse un marco para saber en que ventana esta el usuario*/
.contacto input[type="text"]:focus,
.contacto input[type="email"]:focus,
.contacto textarea:focus{
border: 2px solid #43ce98;
}
/*para el boton*/
.contacto input[type="submit"]{
width: 200px;
margin: 0 auto;
background: none;
border: 1px solid #43ce98;
color:#43ce98;
padding: 10px;
cursor: pointer;
font-size: 16px;
border-radius: 3px;
}
/*cuando el usuario pase el puntero por encima del boton se va a rellenar con color*/
.contacto input[type="submit"]:hover{
background: #43ce98;
color: #fff;
}