CSS3 Tutorial Crear un elegante botón de encendido / apagado
El uso de un botón es, hasta ahora, la forma preferida de interactuar con un material electrónico; como la radio, la televisión, el reproductor de música e incluso un teléfono inteligente que tiene una función de comando de voz, todavía necesita al menos uno o dos botones físicos.
Además, en esta era digital, la botón También ha evolucionado en su forma digital, lo que lo hace más interactivo, dinámico y fácil de hacer, en comparación con el botón físico.
Entonces, esta vez, vamos a crear un botón ingenioso e interactivo que se basa en este excelente diseño en Dribbble utilizando solo CSS.
Bueno, vamos a empezar.
HTML
Comenzaremos el botón colocando el siguiente marcado en nuestro documento HTML. Es realmente simple, el botón se basaría en una etiqueta de anclaje, también tenemos un lapso junto a él para crear la luz indicadora, y luego se envuelven juntos en un HTML5 sección etiqueta.
& # xF011;
Así es como se ve nuestro botón inicialmente.
Estilo básico
En esta sección, comenzaremos a trabajar en el Estilos.
Primero aplicamos este fondo oscuro del Patrón sutil en el documento del cuerpo y centramos el sección. A continuación, también eliminaremos los puntos. contorno sobre la :atención y :activo enlazar.
body background: url ('images / micro_carbon.png'); seccion margen: 150px auto 0; ancho: 75px; altura: 95px; posición: relativa; text-align: center; : activo,: foco esquema: 0; Usando fuente personalizada
Para el icono del botón, usaremos una fuente personalizada de Font Awesome en lugar de una imagen. De esa manera, el icono será fácilmente adaptable al estilo y escalable a través de la hoja de estilo.
Descargue la fuente, almacene los archivos de fuentes (eot, woff, ttf y svg) en el fuentes y luego coloque el siguiente código en su hoja de estilo para definir una nueva familia de fuentes.
@ font-face font-family: "FontAwesome"; src: url ("fonts / fontawesome-webfont.eot"); src: url ("fonts / fontawesome-webfont.eot? #iefix") formato ('eot'), url ("fonts / fontawesome-webfont.woff") formato ('woff'), url ("fonts / fontawesome- webfont.ttf ") formato ('truetype'), url (" fonts / fontawesome-webfont.svg # FontAwesome ") formato ('svg'); fuente-peso: normal; estilo de letra: normal; 
los icono de poder Lo que necesitamos para este botón está representado en número Unicode. F011; Si observa detenidamente el marcado HTML anterior, hemos puesto este carácter numérico. & # xF011; dentro de la etiqueta de anclaje, pero como no hemos definido la costumbre Familia tipográfica En el estilo de botón, el icono aún no se ha renderizado correctamente..
Otras lecturas: Unicode y HTML: Caracteres del documento
Estilo del botón
En primer lugar, tenemos que definir la costumbre. Familia tipográfica para el botón.
Nuestro botón será un círculo, podemos lograr el efecto círculo usando el radio del borde propiedad y establezca el valor en, al menos, la mitad de los botones anchura.
Ya que estamos usando una fuente para el icono, podemos configurar fácilmente la color y añadir sombra de texto para el icono en la hoja de estilo también.
A continuación, también crearemos un efecto biselado para el botón. Este efecto es bastante complicado. En primer lugar, tenemos que aplicar color de fondo: rgb (83,87,93); para la base de color del botón, luego agregamos hasta cuatro capas de sombras de cajas.
a font-family: "FontAwesome"; color: rgb (37,37,37); texto-sombra: 0px 1px 1px rgba (250,250,250,0.1); tamaño de fuente: 32pt; bloqueo de pantalla; posición: relativa; texto-decoración: ninguno; color de fondo: rgb (83,87,93); box-shadow: 0px 3px 0px 0px rgb (34,34,34), / * 1st Shadow * / 0px 7px 10px 0px rgb (17,17,17), / * 1nd Shadow * / inset 0px 1px 1px 0px rgba (250) , 250, 250, .2), / * 3rd Shadow * / inset 0px -12px 35px 0px rgba (0, 0, 0, .5); / * 4th Shadow * / width: 70px; altura: 70px; borde: 0; radio del borde: 35px; text-align: center; línea de altura: 79px;
También hay un círculo más grande en el exterior del botón y usaremos el :antes de pseudo-elemento por ello en lugar de agregar un margen de beneficio adicional.
a: antes de contenido: ""; ancho: 80px; altura: 80px; bloqueo de pantalla; índice z: -2; posición: absoluta; color de fondo: rgb (26,27,29); izquierda: -5px; arriba: -2px; radio del borde: 40px; caja-sombra: 0px 1px 0px 0px rgba (250,250,250,0.1), recuadro 0px 1px 2px rgba (0, 0, 0, 0,5);
Otras lecturas: CSS: antes y: después pseudo-elementos (Hongkiat.com)
Luz indicadora
Debajo del botón, hay una pequeña luz para designar el estado de encendido y apagado. A continuación, aplicamos rojo para el color de la luz porque inicialmente la alimentación está apagada, también agregamos sombra de la caja Imitar el efecto de brillo de la luz..
a + span display: block; ancho: 8px; altura: 8px; color de fondo: rgb (226,0,0); cuadro de sombra: recuadro 0px 1px 0px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px rgba (226,0,0,0.5); radio del borde: 4px; Limpia los dos; posición: absoluta; abajo: 0; izquierda: 42%;
El efecto
En este punto, nuestro botón comienza a verse bien y solo tenemos que agregarle algunos efectos, por ejemplo, cuando se hace clic en el botón, queremos que se vea como si se presionara y mantuviera presionado..
Para lograr el efecto, la primera sombra de la caja en el botón se pondrá a cero y la posición se reducirá un poco. También necesitamos ajustar un poco las intensidades de las otras tres sombras para que coincidan con la posición del botón..
a: activo box-shadow: 0px 0px 0px 0px rgb (34,34,34), / * 1st Shadow * / 0px 3px 7px 0px rgb (17,17,17), / * 2nd Shadow * / inset 0px 1px 1px 0px rgba (250, 250, 250, .2), / * 3rd Shadow * / inset 0px -10px 35px 5px rgba (0, 0, 0, .5); / * Cuarta sombra * / fondo-color: rgb (83,87,93); superior: 3px;
Además, una vez que se hace clic en el botón, debe permanecer presionado y el ícono debe "brillar" para indicar que la alimentación está ENCENDIDA.
Para lograr tal efecto, apuntaremos al botón usando el botón :objetivo pseudo-clase, a continuación, cambie el color del icono a blanco y añada una sombra de texto con color blanco tambien.
a: target box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), recuadro 0px 1px 1px 0px rpba (250, 250, 250, .2) , recuadro 0px -10px 35px 5px rgba (0, 0, 0, .5); color de fondo: rgb (83,87,93); superior: 3px; color: #fff; texto-sombra: 0px 0px 3px rgb (250,250,250);
Otras lecturas: Usando: target pseudo-clase
También necesitamos ajustar el sombra de la caja en el círculo fuera del botón, como sigue.
a: activo: antes, a: objetivo: antes superior: -5px; color de fondo: rgb (26,27,29); caja-sombra: 0px 1px 0px 0px rgba (250,250,250,0.1), recuadro 0px 1px 2px rgba (0, 0, 0, 0,5);
El indicador luminoso cambiará de color rojo a verde predeterminado para enfatizar que la alimentación ya está ENCENDIDA.
a: target + span box-shadow: inserción 0px 1px 0px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px rgba (135,187,83,0.5); color de fondo: rgb (135,187,83);
Efecto de transición
Por último, para que el efecto del botón se ejecute sin problemas, también aplicaremos el siguiente efecto de transición.
Este fragmento a continuación agregará específicamente la transición a la color propiedad y la sombra de texto para 350ms en el elemento de anclaje.
a transición: color 350ms, texto-sombra 350ms; -o-transición: color 350ms, texto-sombra 350ms; -mZ-transición: color 350ms, texto-sombra 350ms; -webkit-transición: color 350ms, texto-sombra 350ms;
Este segundo fragmento a continuación agregará la transición para el color de fondo y sombra de la caja propiedad en el indicador luminoso.
a: target + span transición: fondo-color 350ms, cuadro-sombra 700ms; -o-transición: fondo-color 350ms, cuadro-sombra 700ms; -moz-transición: fondo-color 350ms, cuadro-sombra 700ms; -webkit-transición: fondo-color 350ms, cuadro-sombra 700ms;
Resultado final
Hemos superado todos los estilos que necesitamos, ahora puede ver el resultado final en vivo y descargar el archivo fuente de los enlaces a continuación..
- Manifestación
- Descargar fuente
Bonus: Como apagarlo
Aquí viene la bonificación. Si ha probado el botón de la demostración anterior, ha notado que solo se puede hacer clic en el botón una vez, y eso es para activarlo, entonces, ¿cómo lo desactivamos??.
Desafortunadamente, tenemos que hacerlo con jQuery, pero también es muy simple. A continuación se muestra el código jQuery que necesitamos..
$ (document) .ready (function () $ ('# button'). click (function () $ (this) .toggleClass ('on'););); El fragmento anterior agregará la clase ON en el ancla, y usamos el toggleClass Funciona desde jQuery para agregarlo. Entonces, cuando el #botón se hace clic en, jQuery verificará si la clase ON se ha agregado o no: cuando no lo esté, jQuery agregará la clase y, si se ha agregado, jQuery eliminará la clase.
Nota: No olvides incluir la librería jQuery..
Ahora tenemos que cambiar un poco el estilo. Simplemente reemplace todos los :objetivo pseudo-elemento con el .en selector de clase, como sigue:
a.on box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), inserción 0px 1px 1px 0px rgba (250, 250, 250, .2) , recuadro 0px -10px 35px 5px rgba (0, 0, 0, .5); color de fondo: rgb (83,87,93); superior: 3px; color: #fff; texto-sombra: 0px 0px 3px rgb (250,250,250); a: activo: antes, a.on: antes superior: -5px; color de fondo: rgb (26,27,29); caja-sombra: 0px 1px 0px 0px rgba (250,250,250,0.1), recuadro 0px 1px 2px rgba (0, 0, 0, 0,5); a.on + span box-shadow: inserción 0px 1px 0px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px rgba (135,187,83,0.5); color de fondo: rgb (135,187,83);
Finalmente, intentémoslo en el navegador..
- Manifestación
- Descargar fuente
