CSS BOTÓN DEL BOTÓN
Usando etiquetas HTML, no hay un método sencillo para construir un botón de alternancia. Para construir un botón de interruptor de palanca, debemos emplear el estilo CSS.
Creación de un botón de palanca:
Aunque no hay una etiqueta HTML nativa para construir un botón de interruptor de palanca, puede utilizar la casilla de verificación y luego cambiarla usando CSS para construir un botón de alternancia. Para este propósito, utilizaremos el elemento "Entrada" con la casilla de verificación de atributos para construir una "casilla de verificación".
El elemento le proporciona controles interactivos destinados a formularios basados en la web que obtienen información de los usuarios. Dependiendo del tipo de característica, el elemento podría ser de varios tipos. El atributo "ID" en el elemento de entrada se refiere a una afirmación de hoja de estilo particular. El elemento con el ID especificado también puede modificarse a través de este.
La casilla de verificación tiene una área muy pequeña en clic en el que se puede hacer clic, pero el interruptor de alternancia requiere un área más grande. Entonces, para ampliar el área interactiva, encerrarla en una etiqueta de etiqueta. Dentro de la "etiqueta", coloque una etiqueta de "span" para hacer un control deslizante con CSS después. En HTML, la etiqueta se emplea para aumentar la eficiencia de los operadores del cursor. El control se alterna cuando una persona golpea los datos dentro del elemento.
A continuación se muestra el código CSS, para cambiar el elemento de etiqueta dentro de este script, el elemento de etiqueta del interruptor también está conectado al elemento de casilla de verificación HTML a través de su ID. Al presionar la etiqueta de una casilla de verificación, puede marcarla o descartarla.
El fragmento anterior creará una casilla de verificación simple.
Ahora, usaremos el estilo CSS para darle la apariencia de un botón de palanca. Se proporciona la información de diseño de una página web (CSS) utilizando atributo. La etiqueta describe la forma en que los componentes de HTML deben mostrar en un navegador. Tome el elemento de la etiqueta y ajuste su ancho, altura, posición, color de fondo, radio borde y otras propiedades. El atributo de ancho de CSS determina el ancho del dominio de contenido de un objeto. La altura de un elemento está determinada por el atributo de altura. El atributo de radio fronterizo le da al borde del borde exterior de un elemento una apariencia redondeada. Puede construir esquinas circulares con un solo radio o esquinas elípticas con dos radios.
Aplicación de la propiedad CSS "Pantalla: bloque en línea", las pautas de diseño podrían agregarse a componentes HTML específicos. La posición de un elemento con el atributo "Posición: relativo"; es relativo a su posición predeterminada. Un elemento relativamente positivo se modificaría de la ubicación predeterminada una vez que las propiedades izquierda, superior, inferior o derecha se modifiquen. Hacemos que aparezca como un área haciendo clic al darle un cursor de puntero y oscurecer la casilla de verificación con "Cursor: Pointer".
Puede utilizar la propiedad del cursor de CSS para indicar el tipo de cursor que el usuario debe ver. El ancho y la altura del objeto de la etiqueta son necesarios ya que definen la región real de clic del botón de alternativa. Use "Display: None" para que la casilla de verificación estándar sea invisible. Esta propiedad se usa para ocultar y revelar entidades sin eliminarlas y reemplazarlas. Aunque todavía está presente dentro del código fuente, el elemento asociado no captura la brecha.
Ahora, tenemos un área que se puede hacer clic en la pantalla de salida.
El "botón interno" ahora debe construirse al finalizar la "carcasa externa". Ahora utilizaremos el elemento "span" para crear el control deslizante. Se está utilizando para diseñar objetos a través de agruparlos. Si tiene la intención de resaltar una determinada oración o pieza de material, puede diseñarlo envolviéndolo en un elemento de tramo, dándole una etiqueta de clase y luego elegir esto con los valores de la función. Asigne ubicaciones absolutas, superior e izquierda para colocarlo sobre el componente de la etiqueta. Proporcione este elemento "Span" con el "ancho" y la "altura" que ha configurado para el elemento de la etiqueta. Haremos un mango de control deslizante circular ahora utilizando la pseudo-clase. Esta clase con el atributo de contenido se ejerce comúnmente para agregar material estilístico a un elemento.
Una vez que ejecutamos el código mencionado anteriormente, se genera un control deslizante redondo en el interruptor.
Con el "cuadro exterior" y el "botón interno" en su lugar, todo lo que queda será para manejar el cambio. También podemos incluir nuestro atributo de "transición" que hará que el círculo se mueva de derecha a izquierda cuando se haga clic en. La "transformación: traducex (n);", la propiedad es responsable del movimiento real: eso cambiará el pseudoelemento una cantidad especificada de píxeles junto con el eje X. Hemos utilizado un identificador nuevo para el pseudo-elemento ":: antes" y el atributo de "transición" al identificador de control deslizante actual. El atributo ":: antes" genera el primer hijo del elemento objetivo como pseudo-elemento. Para acomodar la transición de izquierda a derecha, solo hemos incluido el atributo "traducex" al pseudo elemento novedoso.
En la salida final, hemos creado un botón de alternancia de trabajo.
Agregar texto en el botón de palanca:
Como en la ilustración anterior, hicimos un botón de palanca simple sin texto. Para agregar texto al botón de palanca, simplemente insertamos un componente HTML adicional dentro de él y lo diseñamos con una hoja de estilo para crearlo como una etiqueta.
Utilizaremos la pseudo-clase para construir etiquetas que se muestren en o desactivan el texto en función del estado del botón de alternativa. Podemos usar la propiedad de datos para incluir atributos de datos arbitrarios en elementos HTML. Para el modo OFF, arreglaremos la opacidad a 0 y para el modo ON; Lo ajustaremos a 1. El atributo de opacidad en CSS se utiliza para indicar la visibilidad de un objeto. En pocas palabras, describe la claridad de la imagen.
El código de arriba encenderá y apagará el texto del botón.
Botón de alternar cuando se hace clic en:
Botón de alternar cuando se hace clic:
Botón de palanca con borde:
También podemos agregar bordes al botón de palanca que acabamos de crear anteriormente con el texto. En el fragmento de código a continuación, hemos establecido todos los elementos necesarios para generar y mostrar el borde para el contenedor de botón de palanca, así como para la bola redonda interna. Aparte de eso, también tenemos que poner el color del borde. En nuestro ejemplo, lo hemos establecido en #2196F3, que es un código de color hexadecimal para aplicar el color azul cian.
Puede ver que los bordes aparecen en el botón de alternancia resultante.
Conclusión:
Aprender CSS al esforzarse por convertirse en un desarrollador web es un requisito central. En este artículo, hemos discutido el interruptor de palanca CSS. La primera parte de este fragmento contiene una introducción a los botones de alternar en CSS y luego elaboramos con un ejemplo práctico de script CSS de la creación del interruptor de alternar. Además insertamos texto en el botón de alternar. En la última parte, le mostramos cómo agregar un borde al botón de palanca. Para la implementación de los ejemplos de código, utilizamos el editor de texto sublime.