Usar un botón es, hasta ahora, la forma preferida de interactuar con un material electrónico; como la radio, la TV, el reproductor de música e incluso un teléfono inteligente que tiene una función de comando de voz aún 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 realmente fácil de hacer, en comparación con el botón físico.
Entonces, esta vez, vamos a crear un botón elegante e interactivo que se basa en este excelente diseño en Dribbble usando solo CSS.
Bueno, empecemos.
HTML
Comenzaremos con el botón colocando el siguiente marcado en nuestro documento HTML. Es muy simple, el botón se basaría en una etiqueta de anclaje, también tenemos un span junto a él para crear la luz indicadora, y luego se envuelven juntos dentro de un HTML5 section etiqueta.
<section> <a href="https://www.hongkiat.com/blog/css3-on-off-button/#button" id="button"></a> <span></span> </section>
Así es como se ve inicialmente nuestro botón.
Estilo básico
En esta sección, comenzaremos a trabajar en el Estilos.
En primer lugar, aplicamos este fondo oscuro de Patrón sutil en el documento del cuerpo y centramos el section. Luego, también quitaremos el punteado outline sobre la :focus y :active enlace.
body {
background: url('images/micro_carbon.png');
}
section {
margin: 150px auto 0;
width: 75px;
height: 95px;
position: relative;
text-align: center;
}
:active, :focus {
outline: 0;
}
Uso de fuente personalizada
Para el ícono del botón, usaremos una fuente personalizada de Font Awesome en lugar de una imagen. De esa manera, el ícono se podrá diseñar y escalar fácilmente a través de la hoja de estilo.
Descargue la fuente, almacene los archivos de fuente (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") format('eot'),
url("fonts/fontawesome-webfont.woff") format('woff'),
url("fonts/fontawesome-webfont.ttf") format('truetype'),
url("fonts/fontawesome-webfont.svg#FontAwesome") format('svg');
font-weight: normal;
font-style: normal;
}
El icono de poder 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 dentro de la etiqueta de anclaje, pero como no hemos definido la costumbre font-family en el estilo de botón, el icono aún no se ha representado correctamente.
Otras lecturas: Unicode y HTML: Caracteres del documento
Aplicar estilo al botón
En primer lugar, tenemos que definir la costumbre font-family para el botón.
Nuestro botón será un círculo, podemos lograr el efecto de círculo usando el border-radius propiedad y establecer el valor en, al menos, la mitad de la del botón width.
Dado que estamos usando una fuente para el ícono, podemos configurar fácilmente el color y añadir text-shadow 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. Primero, tenemos que aplicar background-color: rgb(83,87,93); para la base de color del botón, luego agregamos hasta cuatro capas de box-shadows.
a {
font-family: "FontAwesome";
color: rgb(37,37,37);
text-shadow: 0px 1px 1px rgba(250,250,250,0.1);
font-size: 32pt;
display: block;
position: relative;
text-decoration: none;
background-color: 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;
height: 70px;
border: 0;
border-radius: 35px;
text-align: center;
line-height: 79px;
}
También hay un círculo más grande en el exterior del botón y usaremos el :before pseudo-elemento para ello en lugar de agregar marcas adicionales.
a:before {
content: "";
width: 80px;
height: 80px;
display: block;
z-index: -2;
position: absolute;
background-color: rgb(26,27,29);
left: -5px;
top: -2px;
border-radius: 40px;
box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1),
inset 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 la alimentación está inicialmente APAGADA, también agregamos box-shadow para imitar el efecto de brillo de la luz.
a + span {
display: block;
width: 8px;
height: 8px;
background-color: rgb(226,0,0);
box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),
0px 0px 3px 2px rgba(226,0,0,0.5);
border-radius: 4px;
clear: both;
position: absolute;
bottom: 0;
left: 42%;
}
El efecto
En este punto, nuestro botón comienza a verse bien y solo necesitamos agregarle algunos efectos, por ejemplo, cuando se ‘hace clic’ en el botón, queremos que parezca que se está presionando y manteniendo presionado.
Para lograr el efecto, lo primero box-shadow en el botón se pondrá a cero y la posición se bajará 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:active {
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); /* 4th Shadow */
background-color: rgb(83,87,93);
top: 3px;
}
Además, una vez que se ha hecho clic en el botón, debe permanecer presionado y el icono debe ‘brillar’ para indicar que la alimentación está encendida.
Para lograr tal efecto apuntaremos el botón usando el :target pseudo-claseluego cambia el color del ícono a blanco y agrega un text-shadow con color blanco también.
a:target {
box-shadow: 0px 0px 0px 0px rgb(34,34,34),
0px 3px 7px 0px rgb(17,17,17),
inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
background-color: rgb(83,87,93);
top: 3px;
color: #fff;
text-shadow: 0px 0px 3px rgb(250,250,250);
}
Otras lecturas: Usando: objetivo pseudo-clase
También tenemos que ajustar el box-shadow en el círculo fuera del botón, de la siguiente manera.
a:active:before, a:target:before {
top: -5px;
background-color: rgb(26,27,29);
box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1),
inset 0px 1px 2px rgba(0, 0, 0, 0.5);
}
El indicador de luz cambiará del color rojo predeterminado al verde para enfatizar que la alimentación ya está ENCENDIDA.
a:target + span {
box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),
0px 0px 3px 2px rgba(135,187,83,0.5);
background-color: rgb(135,187,83);
}
Efecto de transición
Por último, para que el efecto del botón funcione sin problemas, también aplicaremos el siguiente efecto de transición.
Este fragmento a continuación agregará específicamente la transición al color propiedad y la text-shadow para 350ms en el elemento de anclaje.
a {
transition: color 350ms, text-shadow 350ms;
-o-transition: color 350ms, text-shadow 350ms;
-moz-transition: color 350ms, text-shadow 350ms;
-webkit-transition: color 350ms, text-shadow 350ms;
}
Este segundo fragmento a continuación agregará la transición para el background-color y box-shadow propiedad en el indicador de luz.
a:target + span {
transition: background-color 350ms, box-shadow 700ms;
-o-transition: background-color 350ms, box-shadow 700ms;
-moz-transition: background-color 350ms, box-shadow 700ms;
-webkit-transition: background-color 350ms, box-shadow 700ms;
}
Resultado final
Hemos revisado todos los estilos que necesitamos, ahora puede ver el resultado final en vivo y descargar el archivo fuente desde los enlaces a continuación.
- Manifestación
- Fuente de descarga
Bono: cómo apagarlo
Aquí viene el bono. Si probó el botón de la demostración anterior, notó que solo se puede hacer clic en el botón una vez, y eso es para encenderlo, entonces, ¿cómo lo apagamos?
Desafortunadamente, tenemos que hacerlo con jQuery, pero también es muy simple. A continuación se muestra todo el código jQuery que necesitamos.
$(document).ready(function(){
$("https://www.hongkiat.com/blog/css3-on-off-button/#button").click(function(){
$(this).toggleClass('on');
});
});
El fragmento anterior agregará la clase ON en el ancla, y usamos el toggleClass función de jQuery para agregarlo. Entonces, cuando el #button 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 olvide incluir la biblioteca jQuery.
Ahora tenemos que cambiar un poco el Estilo. Simplemente reemplace todos los :target pseudo-elemento con el .on selector de clase, de la siguiente manera:
a.on {
box-shadow: 0px 0px 0px 0px rgb(34,34,34),
0px 3px 7px 0px rgb(17,17,17),
inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
background-color: rgb(83,87,93);
top: 3px;
color: #fff;
text-shadow: 0px 0px 3px rgb(250,250,250);
}
a:active:before, a.on:before {
top: -5px;
background-color: rgb(26,27,29);
box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1),
inset 0px 1px 2px rgba(0, 0, 0, 0.5);
}
a.on + span {
box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),
0px 0px 3px 2px rgba(135,187,83,0.5);
background-color: rgb(135,187,83);
}
Finalmente, intentémoslo en el navegador.
- Manifestación
- Fuente de descarga