En este Laboratorio (Lab), aprenderás cómo crear botones de compartición social animados utilizando HTML y CSS3. Estos botones utilizan la biblioteca Font Awesome para los iconos y están estilizados con CSS para proporcionar un suave efecto de transición al pasar el cursor sobre ellos. Al final de esta guía, tendrás un conjunto de hermosos botones sociales responsivos que puedes integrar en cualquier sitio web.
Skills Graph
%%%%{init: {'theme':'neutral'}}%%%%
flowchart RL
css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"])
css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"])
css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"])
css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"])
css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"])
css/BasicConceptsGroup -.-> css/selectors("Selectors")
css/BasicStylingGroup -.-> css/text_styling("Text Styling")
css/CoreLayoutGroup -.-> css/display_property("Display Property")
css/IntermediateStylingGroup -.-> css/pseudo_classes("Pseudo-classes")
css/IntermediateStylingGroup -.-> css/pseudo_elements("Pseudo-elements")
css/DynamicStylingGroup -.-> css/transformations("Transformations")
subgraph Lab Skills
css/selectors -.-> lab-179618{{"Botones de compartición social animados con CSS"}}
css/text_styling -.-> lab-179618{{"Botones de compartición social animados con CSS"}}
css/display_property -.-> lab-179618{{"Botones de compartición social animados con CSS"}}
css/pseudo_classes -.-> lab-179618{{"Botones de compartición social animados con CSS"}}
css/pseudo_elements -.-> lab-179618{{"Botones de compartición social animados con CSS"}}
css/transformations -.-> lab-179618{{"Botones de compartición social animados con CSS"}}
end
Introducción a los iconos
Para utilizar los iconos de Font Awesome, simplemente utiliza el prefijo "fa" seguido del nombre del icono.
El formato específico es el siguiente: <i class="fa ICON_NAME"></i>
Para introducir los iconos necesarios desde la biblioteca de iconos, escribe el siguiente código en el archivo index.html:
Utilizar selectores de pseudo-clases permite que el estilo cambie cuando el mouse se posa sobre el objeto enlazado. Por lo tanto, agregamos un enlace vacío al icono, o puedes enlazar a las respectivas páginas de inicio de las redes sociales.
Sintaxis de la pseudo-clase: selector:pseudo-clase {propiedad:valor;}
a:hover {propiedad:valor;} establece el estilo que se muestra cuando el mouse se posa sobre el enlace.
Establece los selectores de clase necesarios para facilitar el posterior estilo de los respectivos botones.
A continuación, configuraremos el icono para que se agrande instantáneamente cuando se toque y cambie de color. Para el efecto de agrandamiento instantáneo, podemos usar transform: scale(0.8) para reducir el icono al 80% de su tamaño original, y cuando se produzca el evento de toque, se redimensiona de nuevo a su tamaño original usando transform: scale(1).
Ingresa el siguiente código en el archivo style.css:
.social-btns.btn.fa {
/* Set the default link display style */
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
.social-btns.btn:focus.fa, /* Select the focused button style */
.social-btns.btn:hover.fa {
/* Set the mouse-over link display style */
color: #fff; /* Change its color */
-webkit-transform: scale(1);
transform: scale(1);
}
.social-btns.btn.fa {
/* Set the size and vertical alignment of the icons provided by Font Awesome */
font-size: 38px;
vertical-align: middle;
}
Para diseñar la página, centramos los botones en la página, los configuramos como elementos en línea de nivel de bloque y luego embellecemos los botones.
El atributo display especifica el tipo de elemento a generar:
display:inline lo configura como un elemento en línea, compartiendo una fila con otros elementos, es decir, no ocupando una fila exclusivamente.
display:block lo configura como un elemento de nivel de bloque y ocupa una fila exclusivamente.
display:inline-block combina los dos métodos anteriores para configurarlo como un elemento de nivel de bloque que no ocupa una fila exclusivamente.
.social-btns {
height: 90px;
margin: 80px auto;
font-size: 0;
text-align: center; /* horizontally centering */
}
.social-btns.btn {
display: inline-block; /* set the button as a block-level element that does not occupy a row exclusively */
background-color: #fff;
width: 90px;
height: 90px;
line-height: 90px; /* set line height */
margin: 0 10px;
text-align: center;
position: relative; /* set to relative positioning */
overflow: hidden; /* hide overflow content */
border-radius: 28%; /* round the corners of the DIV */
box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.1); /* add shadow to the DIV element */
opacity: 0.99; /* specify opacity. From 0.0 transparent to 1.0 completely opaque */
}
Vista previa del efecto:
Observamos que cuando se toca el botón, tanto el icono como el fondo del botón son blancos, lo que no es fácil de ver claramente. Por lo tanto, necesitamos configurar el estilo de toque del fondo del botón. Primero, necesitamos rotar btn:before en el sentido de las agujas del reloj 45° utilizando transform: rotate(45deg). Luego ajustamos las posiciones inicial y final de btn:before.
Selector before: Inserta nuevo contenido antes del contenido del elemento.
.social-btns.btn:before {
/*Set the top and left values before the content of each btn element, i.e. the position of the btn when not touched*/
top: 90%;
left: -110%;
}
.social-btns.btn:focus:before,
.social-btns.btn:hover:before {
/*Adjusts the position of the button when touched*/
top: -10%;
left: -10%;
}
.social-btns.btn:before {
content: "";
width: 120%;
height: 120%;
position: absolute;
/*Flip btn:before by 45° clockwise*/
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
/*Set the btn:before color, i.e. the button's background color after touching*/
.social-btns.btn.facebook:before {
background-color: #3b5998;
}
.social-btns.btn.twitter:before {
background-color: #00aff0;
}
.social-btns.btn.instagram:before {
background-color: #bf00ff;
}
.social-btns.btn.google:before {
background-color: #dc4a38;
}
.social-btns.btn.pinterest:before {
background-color: #cc0000;
}
Vista previa del efecto:
Finalmente, realizamos ajustes de transición a los botones, principalmente utilizando el atributo transition-timing-function para establecer la curva de velocidad del efecto de transición y hacerlo visualmente más suave.
.social-btns.btn,
.social-btns.btn:before,
.social-btns.btn.fa {
transition: all 0.35s; /* all styles 0.35 seconds easing */
transition-timing-function: cubic-bezier(
0.31,
-0.105,
0.43,
1.59
); /* specify the speed of the transition effect */
}
Vista previa del efecto:
Nota: Haz clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puedes actualizar la pestaña Web 8080 para ver una vista previa de la página web.
Expansión del conocimiento
No solo podemos configurar el efecto al pasar el cursor sobre un hipervínculo, sino que también podemos utilizar selectores de pseudo-clases para configurar efectos para hipervínculos no visitados, visitados y seleccionados.
a:link {atributo: valor;} configura el efecto para hipervínculos no visitados.
a:visited {atributo: valor;} configura el efecto para hipervínculos visitados.
a:active {atributo: valor;} configura el efecto para hipervínculos seleccionados.
En este Laboratorio (Lab), aprendimos lo siguiente:
Referencias de la biblioteca de iconos Font Awesome
Selectores de pseudo-clases de CSS
Propiedades de transformación de CSS
La propiedad display
Selector before
Este Laboratorio (Lab) utiliza CSS para transformar un icono estático en un botón con efectos dinámicos. CSS no solo puede establecer un estilo uniforme para estilos repetitivos para mejorar la eficiencia del desarrollo web, sino que también puede configurar una variedad de elementos según las necesidades de la página web para lograr el propósito de embellecer la página web y mejorar la sensación de uso del usuario.
