Cómo diseñar el botón de entrar y enviar con CSS

CSS es un lenguaje para crear hojas de estilo que describen cómo se representa un documento en un lenguaje de marcado como HTML o XML. Junto con HTML y JavaScript, CSS es un componente clave de la World Wide Web. CSS permite a los usuarios diseñar todos los elementos HTML, incluidas tablas, botones, campos de entrada, formularios y más. Esta publicación explica:

¿Cómo diseñar campos de entrada con CSS?

Para diseñar el campo de entrada con CSS, pruebe el procedimiento mencionado.
Paso 1: Crear formulario de entrada
Primero, cree un formulario en HTML. Para hacer esto, siga las instrucciones a continuación:

• Primero crea un formulario usando el «» Signo.
• Dentro del formulario, el «El elemento ” se define para proporcionar etiquetas para el “Entrada«Elementos. Las etiquetas»PorEl atributo ” se utiliza para etiquetar el elemento de la etiqueta con el -Elemento arriba «me gustaría“.
• Ese «EscribeEl atributo ” determina el tipo de entrada, p. B. texto o número.
• Ese «ClaseEl atributo ” se convierte en el “Entrada» Apellido, «marcador de posiciónEl atributo ” ocupa el texto del marcador de posición en el campo de entrada:

Ingrese el nombre

Introduzca el apellido

producción

Paso 2: botón de entrada de estilo en CSS
Para diseñar el botón de entrada en CSS, mira las propiedades dadas: input{ padding: 8px; radio del borde: 10px; borde: 5px automático; borde: 1px sólido #918383; color de fondo: #87b8b8; sombra de caja: 1px 2px 1px 2px rgb(230, 229, 229); Color: #c9c2c2; Contorno: ninguno; tamaño de fuente: 18px;} Llame al «Entrada” clase y luego aplique las propiedades mencionadas a continuación:

• Frase «tapicería‘, que especifica el espaciado alrededor del contenido del elemento.
• «radio límiteLa propiedad ” redondea los bordes del elemento.
• «Margen de beneficio«propiedad con valor»5px automáticamente«agrega espacios»5px‘arriba y abajo y’automóvil” se utiliza para establecer el mismo espacio alrededor del elemento a la izquierda y a la derecha.
• «FronteraLa propiedad ” especifica el borde alrededor de la tabla.
• «color de fondoLa propiedad ” se utiliza para especificar el color del fondo.
• «sombra de la caja‘ agrega una sombra alrededor del elemento. Es una propiedad abreviada que especifica el desplazamiento x, el desplazamiento y, el efecto de desenfoque, el efecto de dispersión y el color de la sombra.
• «ColorLa propiedad ” hace referencia al color de fuente del elemento.
• «estructura” ajusta la línea alrededor de los elementos para que dominen.
• «tamaño de fuenteLa propiedad ” se utiliza para establecer el tamaño de fuente del elemento.

producción

A continuación, acceda a «etiqueta” Elemento a estilo: etiqueta{ font-size: 18px; Color: rgb (15, 15, 15); margin: 20px;} Después de acceder al elemento Etiqueta, aplique el estilo de su elección. Por ejemplo, aplicamostamaño de fuente«, «Color«, y «Margen de beneficio» Características.
producción

Pasemos a la siguiente sección para diseñar el botón Enviar con CSS.

¿Cómo diseñar el botón de enviar con CSS?

Para diseñar el botón Enviar con CSS, consulte el siguiente ejemplo, que muestra una guía paso a paso para crear y diseñar el botón HTML.
Paso 1: crea un botón de envío
Primero, agregue el texto del encabezado dentro de la etiqueta del encabezado «

“. Luego crea un botón escribiendo «” elemento y establezca el tipo de botón como “enviar”:

elemento de botón de estilo

Enviar

producción

Paso 2: Diseña el elemento «botón»
Para diseñar el botón en CSS, consulte las propiedades que se describen a continuación: button{ padding: 12px 40px; radio del borde: 8px; sombra de cuadro: 2px 2px 2px 1px rgb(131, 131, 219) ; borde: 1 px gris sólido; font-size: 20px;} Acceda al elemento del botón por nombre de etiqueta y aplique las propiedades al botón según sus preferencias. Por ejemplo, aplicamostapicería«, «radio límite«, «sombra de la caja«, «Frontera«, y «tamaño de fuente» Características.
producción

Agreguemos el efecto de desplazamiento en el elemento del botón: button:hover{ background-color: cadetblue; Color: rgb(246, 244, 248);} El «Botón: Pasar el cursorEl selector se usa para aplicar el efecto de desplazamiento al botón. Con la ayuda de «flotarSelector permite a los usuarios generar el efecto CSS en tiempo real. Por ejemplo, tenemos el «color de fondo» y «Color” Propiedades como se describe arriba:

Discutimos el estilo del campo de entrada y el botón de envío con CSS.

Conclusión

Para diseñar el elemento de entrada y el botón de envío con CSS, se utilizan varias propiedades de CSS, que incluyen «padding», «border-radius», «box-shadow», «margin», «border», «background-color», «Font Tamaño” y muchos más. Los usuarios pueden aplicar las propiedades especificadas accediendo a los elementos por nombre de etiqueta. Esta publicación ha demostrado el método de diseñar los cuadros de texto de entrada y los botones de envío usando CSS.