Cerrar botón CSS
Ejemplo 1:
Crearemos el archivo HTML para diseñar nuestro botón de cierre. Se creará el archivo CSS en el que peinaremos nuestro botón Cerrar. Utilizamos el código Visual Studio para todos estos. Cuando creamos el archivo HTML, en el código Visual Studio, entonces escribimos el código en este archivo. Tenemos que guardar el archivo HTML con la extensión del archivo de ".html "y el archivo CSS con la extensión de".CSS ". Probemos el código dado:
El código anterior es el código HTML, así que aquí está el tipo de este documento mencionado como "HTML". Usamos etiquetas en HTML, por lo que tenemos que abrir etiquetas de "" y "". El meta se define en la etiqueta "" y se establece como "charset = utf-8". Al usar esto, podemos usar muchos personajes. Para vincular el archivo CSS, usamos el "" aquí y el "Rel" describe la relación. El "href" es para dar el nombre del archivo CSS que tenemos que unir a este archivo HTML. Vinculamos el "Buttonstyle.archivo CSS "usando" ".
Ahora, cierre el "" y abra la etiqueta "". La clase "" está aquí para la separación de datos de la web. Tenemos que diseñar el botón en este archivo HTML. El tipo de botón es "botón" y la clase se llama "BTN-Close". Luego, abra "" y esta clase de span se define con el nombre "icon-cross". El "& Time" mostrará la "X" para el botón Cerrar. Cerca "", "", "
y "" Etiquetas.
Código CSS:
En la codificación CSS, damos estilo a nuestro botón de cierre que hemos creado en el archivo HTML. Primero, mencione la clase de botón que es "BTN-CLOSE". Coloque un punto antes de este "BTN-Close" y abre el soporte. Establezca "margen", "borde" y "relleno" en "0". Como el margen es para crear el espacio, el borde es para crear el borde alrededor del botón. El relleno es para crear espacios entre elementos, por lo que establecemos todos estos como "0".
Queremos aplicar "negro" como color de fondo para que coloquemos "fondo: negro" aquí. El "color" describe el color de la fuente o la cruz. El "radio fronterizo" se ha ajustado al "20%". El ancho describe el ancho del botón de cierre que es "40px" y la altura también es "40px". La "pantalla" es "flexible", por lo que establecerá la longitud flexible en la pantalla. La propiedad "Flex-Flow" se aplica aquí a la "columna NowRap". Tenemos que justificar el contenido al centro. Entonces, la línea "Justify-Content: Center" la justificará al centro. Además, alinee los artículos al centro. Seleccione el "cursor" como "puntero". La transición se aplica, ya que controlará la velocidad cuando cambia la propiedad CSS. Se establece como "los 150 ms".
Para la salida, tenemos que usar el navegador. Podemos usar cualquier navegador. Hemos instalado un navegador presionando "Ctrl+Shift+X" e instalando "Abrir en el navegador". Luego, para representar la salida, presionamos "Alt+B" y la salida se mostrará y el botón aparece en la pantalla que se muestra a continuación.
Aquí, puedes ver que creamos un botón de cierre simple. En los próximos ejemplos, crearemos más de un botón de cierre y los diseñaremos usando diferentes colores y formas en CSS.
Ejemplo # 2:
En este ejemplo, vamos a crear más de un botón de cierre y aplicar diferentes colores a estos botones de cierre. Cree los botones de cierre en el archivo HTML.
En este archivo HTML, creamos múltiples botones de cierre usando la etiqueta "". Llamamos la clase del botón como "botón" para crear el primer botón. Luego, coloque un símbolo "x" que se muestra como el personaje cercano "X". Llamamos la segunda clase de botón "Botón Botón2". El nombre de la clase de tercer botón es "botón de botón3". Y los botones cuarto y quinto se denominan "botón de botón4" y "botón de botón5", respectivamente. Debemos cerrar la etiqueta del botón en cada línea.
Código CSS:
En la primera línea, coloque un punto y luego escriba el nombre del primer botón que es "botón" aquí y comience a diseñar el botón. El color del "fondo" del primer botón de cierre es "#4CAF50", que es el código de color verde, por lo que el primer botón de cierre aparecerá verde. El siguiente "color" es para establecer el color de la "x" en "blanco".
Ahora, el "relleno" es vertical "15px", y se aplica vertical "32px". El "Text-Align" está configurado en el "Centro". No tenemos ningún texto escrito en el botón Cerrar, por lo que establecemos la propiedad de "Decoración de texto" en "Ninguno". La "pantalla" como "bloque en línea" es para mostrar un contenedor de bloque en línea. Arregle el "tamaño de fuente" a "16px". Y los márgenes verticales son "4px" y el margen horizontal es "2px". "Pointer" se usa como un "cursor".
Ahora, queremos cambiar los colores de fondo del botón restante para que solo agregemos el color de fondo a los botones restantes. Cierre el soporte del primer botón. Pon un punto y el nombre del segundo botón, y establezca el color de fondo. El código del color de fondo es "#008CBA" que se muestra como "azul". Cambie el color de todos los botones con la misma propiedad y guárdelo. Ver la salida, todos los botones cerrados son de diferentes colores.
Ejemplo # 3:
Usamos nuestro archivo HTML anterior que hemos creado en el Ejemplo 2 y simplemente cambiamos el código CSS. Luego, aplique diferentes formas al botón Cerrar aquí en este ejemplo.
Código CSS:
Hemos establecido el color de fondo para el primer botón como "verde". El relleno es "20px" y esto se aplicará a los cuatro lados. El "tamaño de fuente" se cambia a "16px". El margen es "4px" vertical y "2px" horizontal. La nueva propiedad que agregamos en los botones restantes es la propiedad "Border-Radius". Esto cambiará las esquinas del botón en forma redonda. Y también aplica diferentes colores a todos los botones.
El "Border-Radius" para el primer botón se establece como "2px" y el color de su "fondo" es "rojo". El segundo botón "Border-Radius" es "4px" y el "color de fondo" es "azul". El tercer, cuarto y quinto botones "Border-Radius" son "8px", "12px" y "50%" respectivamente. Además, los colores del fondo para estos botones son "amarillos", "morados" y "naranja", respectivamente. Verifique la salida y vea cómo aparecen estos botones de cierre en el navegador.
En la salida anterior, puede notar que las esquinas de los botones de cierre están redondeados. Todos los botones cercanos son de diferentes formas. El último botón de cierre es un botón de cierre en forma de círculo. Aplicamos todos estos estilos en nuestro archivo CSS.
Conclusión:
Se proporciona esta guía para que sepa cómo crear el botón Cerrar en HTML y CSS. Aquí, hemos diseñado y diseñado diferentes botones de cierre. También hemos proporcionado el código HTML y CSS y la salida de todos los códigos también. Ha aprendido el uso de HTML y CSS en esta guía y podrá crear los botones de cierre siempre que los necesite en sus proyectos o sitios web. También hemos explicado los códigos aquí y hemos demostrado tres ejemplos diferentes para usted.