Cómo diseñar el botón de entrada y enviar con CSS
CSS es un lenguaje para crear hojas de estilo que describen cómo se presenta 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. Usando CSS, los usuarios pueden diseñar todos los elementos HTML, incluidas tablas, botones, campos de entrada, formularios y muchos más.
Esta publicación explicará:
- Cómo diseñar campos de entrada con CSS?
- Cómo diseñar el botón Enviar con CSS?
Cómo diseñar campos de entrada con CSS?
Para peinar el campo de entrada con CSS, pruebe el procedimiento mencionado.
Paso 1: Crear formulario de entrada
En primer lugar, cree un formulario en HTML. Para hacerlo, siga las instrucciones enumeradas a continuación:
- Primero, cree un formulario con la ayuda del "" etiqueta.
- Dentro de la forma, el ""El elemento se define para especificar subtítulos para el"aporte"Elementos. Las etiquetas "para"El atributo se usa para adjuntar el elemento de la etiqueta con el elemento a través de"identificación".
- El "tipo"El atributo determina el tipo de entrada, como el texto o el número.
- El "clase"Atributo se asigna el"Aporte" nombre, "marcador de posiciónEl atributo asigna el texto del marcador de posición en el campo de entrada:
Producción
Paso 2: botón de entrada de estilo en CSS
Para peinar el botón de entrada en CSS, consulte las propiedades dadas:
aporte
relleno: 8px;
Border-Radius: 10px;
Margen: 5px Auto;
borde: 1px Solid #918383;
Color de fondo: #87B8B8;
Shadow de caja: 1PX 2PX 1PX 2PX RGB (230, 229, 229);
Color: #C9C2C2;
Esquema: ninguno;
tamaño de fuente: 18px;
Acceder al "aporteClase "y luego aplique propiedades a continuación mencionadas:
- Colocar "relleno"Eso especifica el espacio alrededor del contenido del elemento.
- "radio fronterizo"La propiedad establece los bordes del elemento redondo.
- "margen"Propiedad con el valor"5px Auto"Agrega espacio"5px"En la parte superior e inferior, y"auto"Se usa para establecer un espacio igual alrededor del elemento a la izquierda y a la derecha.
- "borde"La propiedad especifica el borde alrededor de la mesa.
- "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, la compensación y, el efecto de desenfoque, el efecto de propagación y el color para la sombra.
- "color"La propiedad se refiere al color de fuente del elemento.
- "describir"Ajusta la línea alrededor de los elementos para que sea dominante.
- "tamaño de fuenteLa propiedad se utiliza para establecer el tamaño de fuente del elemento.
Producción
A continuación, acceda a la "etiqueta"Elemento para diseñarlo:
etiqueta
tamaño de fuente: 18px;
Color: RGB (15, 15, 15);
margen: 20px;
Después de acceder al elemento de la etiqueta, aplique el estilo de su elección. Por ejemplo, hemos aplicado "tamaño de fuente","color", y "margen" propiedades.
Producción
Pasemos hacia la siguiente sección para diseñar el botón Enviar usando CSS.
Cómo diseñar el botón Enviar con CSS?
Para diseñar el botón Enviar con CSS, examine el ejemplo a continuación, que demuestra una guía gradual sobre cómo crear y diseñar el botón HTML.
Paso 1: Crear botón Enviar
Inicialmente, agregue texto de encabezado dentro de la etiqueta de encabezado "". Luego, cree un botón utilizando el ""Elemento y configure el tipo de botón como"entregar":
Elemento de botón de estilo
Producción
Paso 2: elemento de estilo "botón"
Para peinar el botón en CSS, consulte las propiedades descritas a continuación:
botón
relleno: 12px 40px;
Border-Radius: 8px;
Shadow de caja: 2px 2px 2px 1px rgb (131, 131, 219);
borde: 1px gris sólido;
tamaño de fuente: 20px;
Acceda al elemento del botón por nombre de la etiqueta y aplique las propiedades en el botón de acuerdo con su preferencia. Por ejemplo, hemos aplicado "relleno","radio fronterizo","sombra de la caja","borde", y "tamaño de fuente" propiedades.
Producción
Agreguemos el efecto de desplazamiento en el elemento del botón:
Botón: Hover
Color de fondo: CadetBlue;
Color: RGB (246, 244, 248);
El "Botón: DesconocidoSe utiliza el selector para aplicar el efecto del flotador en el botón. Con la ayuda del "flotar"Selector, los usuarios pueden generar el efecto CSS en tiempo real. Por ejemplo, hemos establecido el "color de fondo" y "color"Propiedades como se describió anteriormente:
Hemos discutido para diseñar el campo de entrada y enviar el botón con CSS.
Conclusión
Para peinar el elemento de entrada y el botón de enviar con CSS, se utilizan diferentes propiedades de CSS, incluidos "relleno", "Border-Radius", "Box Shadow", "Margen", "Border", "Color de fondo", ",", ",", ",", "," tamaño de fuente ”y muchos más. Los usuarios pueden aplicar las propiedades especificadas accediendo a los elementos a través del nombre de la etiqueta. Esta publicación ha demostrado el método para diseñar los campos de texto de entrada y enviar botones con CSS.