Entrada de estilo y botón Enviar con CSS
- Crear botón Enviar en HTML
- Crear botón de entrada en HTML
- Entrada de estilo y botón Enviar con CSS
- Conclusión
Un botón de envío es un tipo de botón que se utiliza para enviar datos a un formulario. Por lo general, se coloca al final de un formulario después de que se hayan completado todos los demás campos. El formulario se transmite al servidor para su procesamiento cuando se hace clic en el botón Enviar.
La sintaxis del botón de envío es similar a otros botones en HTML, pero el tipo debe ser send. Este artículo nos enseñará cómo aplicar estilo a los botones de entrada y envío en HTML con CSS.
Crear botón Enviar en HTML
Hay dos formas de crear un botón de envío. La primera forma es usar la etiqueta <input> con el atributo type="submit".
Esto creará un botón que, al hacer clic, enviará el formulario.
<button type='submit'>
La segunda forma es usar la etiqueta <button>. Esto creará un botón que se puede personalizar con HTML.
La etiqueta <button> se puede utilizar para enviar el formulario o activar una función de JavaScript.
<input type="submit" value="Submit"/>
Crear botón de entrada en HTML
Un botón de entrada es un control simple que permite al usuario hacer clic y seleccionar una acción. Puede crear un botón de entrada con el elemento <input> con el atributo de tipo establecido en botón.
<input type="button" value="Click me!">
Cuando el usuario hace clic en el botón, se realiza la acción asociada con el botón. En la mayoría de los casos, la acción se define en forma de un controlador de eventos de JavaScript. Por ejemplo, puede definir un botón que muestre un mensaje de alerta al hacer clic:
<input type="button" value="Click me!" onclick="alert('Hello world!')">
Además del atributo de valor, también puede establecer la etiqueta del botón utilizando el atributo de etiqueta.
Por ejemplo
<input type="button" value="Click me!" label="Hello world!">
También puede utilizar CSS para diseñar el botón de entrada. Por ejemplo, puede configurar el ancho, alto, color, etc. del botón.
Entrada de estilo y botón Enviar con CSS
Cuando se trata de diseñar botones de entrada y envío con CSS, deberá asegurarse de que elijan el mismo tamaño, combinación de colores y todas las demás propiedades de estilo para mantener la coherencia en el diseño.
Botón de entrada de estilo con CSS
El botón de entrada es un elemento fundamental de cualquier página web o aplicación. Le permite al usuario enviar información o tomar medidas y se diseña utilizando los estilos predeterminados del navegador. Sin embargo, puede anular los estilos predeterminados usando CSS.
Hay algunas formas diferentes de diseñar el botón de entrada con CSS. La forma más típica es usar las pseudo-clases: hover, :active y :focus de CSS. Estas pseudoclases cambian el estilo del botón cuando el usuario pasa el cursor sobre él, hace clic en él o lo tiene enfocado.
Otra forma de diseñar el botón de entrada es usar las propiedades CSS3 box-shadow y border-radius. Estas propiedades le permiten agregar una sombra alrededor del botón y hacer que el botón sea redondo.
Finalmente, puede usar la propiedad CSS3 transformar para escalar, rotar o sesgar el botón. Esto puede crear efectos emocionantes, como hacer que el botón crezca cuando el usuario pasa el cursor sobre él.
Todos estos métodos se pueden usar para crear botones de entrada únicos y elegantes.
Dar estilo al botón de enviar con CSS
Un enfoque para diseñar un botón de envío usando las propiedades CSS disponibles para usted. Esta puede ser una forma ideal de darle a su botón una apariencia única que coincida con el estilo general de su sitio web.
Otro enfoque es diseñar el contenedor del botón, lo que le puede dar más control sobre el aspecto general del botón. Esto se puede utilizar si desea agregar una imagen de fondo u otro elemento al botón.
ejemplo de código
<!DOCTYPE html>
<html>
<head>
<style>
input[type="submit"] {
position: absolute;
top: 65%;
left: 25%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #f1f1f1;
color: black;
font-size: 16px;
padding: 16px 30px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
border: 2px solid #4caf50; /* Green */
box-shadow: 0 7px 16px 0 rgba(0, 0, 0, 0.4), 0 6px 21px 0 rgba(0, 0, 0, 0.19);
}
input[type="submit"]:hover {
background-color: #4caf50; /* Green */
color: white;
}
input[type="text"] {
width: 40%;
padding: 14px 30px;
margin: 9px 0;
box-sizing: border-box;
}
input[type="textarea"] {
padding: 36px 40px;
}
</style>
</head>
<body>
<h2>Styling form buttons</h2>
<div class="form-center">
<form action="#" method="post">
Name <input type="text" placeholder="Full name" />
<br />
Email <input type="text" placeholder="Email address" />
<br />
Date <input type="text" placeholder="Date" />
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>
Conclusión
Tanto el botón Enviar como los campos de entrada son elementos; la diferencia es que el campo de entrada se utiliza para indicar la entrada de datos, mientras que el botón de envío se puede utilizar para enviar datos al formulario. Además, para dar a sus botones un aspecto estéticamente agradable, la propiedad border-radius también se puede utilizar para crear efectos visuales.
Por ejemplo, puede usarlo para hacer un botón que parece estar empujado hacia abajo en la página cuando se hace clic y hace muchos más trucos de diseño usando CSS.
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn