En este artículo, vamos a crear un botón para compartir que muestra las cuentas de las redes sociales para compartir contenido específico cuando hacemos clic en el botón.
Acercarse:
- Cree un archivo HTML en el que vamos a agregar diferentes tipos de íconos de redes sociales.
- Cree un estilo CSS para dar algunos efectos de animación a los elementos de la página web.
- Cree un archivo JS para agregar detectores de eventos que puedan detectar el evento de clic del mouse.
Código HTML:
- Primero, cree un archivo HTML (index.html).
- Luego vinculamos el archivo CSS que proporciona todo el efecto de la animación a nuestro HTML. Esto también se coloca entre la etiqueta <head>.
- Llegando a la sección del cuerpo de nuestro código HTML.
- Tenemos que agregar diferentes íconos de redes sociales.
- Al final de la etiqueta del cuerpo, debemos agregar 2 etiquetas <script>, una para nuestro archivo index.js y la otra para el ícono que hemos usado en nuestra página web.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"> <script src="https://kit.fontawesome.com/704ff50790.js" crossorigin="anonymous"> </script> <script src="index.js"></script> </head> <body> <div class="main_box"> <input type="checkbox" id="share_button"> <label for="share_button"> <span class="sharebtn" > <i class="far fa-share-square"></i> </span> </label> <div class="sm_list"> <a href="#" class="facebook"> <i class="fab fa-facebook-f"></i> </a> <a href="#" class="instagram"> <i class="fab fa-instagram"></i> </a> <a href="#" class="linkedin"> <i class="fab fa-linkedin-in"></i> </a> <a href="#" class="discord"> <i class="fab fa-discord"></i> </a> <a href="#" class="whatsapp"> <i class="fab fa-whatsapp"></i> </a> <a href="#" class="slack"> <i class="fab fa-slack"></i> </a> </div> </div> </body> </html>
Código CSS: CSS se usa para dar diferentes tipos de animaciones y efectos a nuestra página HTML para que se vea interactiva para todos los usuarios.
En CSS tenemos que recordar los siguientes puntos:
- Restaura todos los efectos del navegador.
- Utilice clases e identificadores para dar efectos a los elementos HTML.
- Uso de :hover para usar efectos de desplazamiento
CSS
/* Restoring browsering effects */
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
.main_box{
width: 4em;
height: 4em;
position: relative;
}
#share_button{
display: none;
}
span,a{
position: absolute;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
span{
width: 4em;
height: 4em;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: #eee;
color: #333;
font-size: 2em;
z-index: 1;
cursor: pointer;
/* border-radius: 30%; */
}
.sm_list{
width: 4em;
height: 4em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.sm_list a{
width: 4em;
height: 4em;
border-radius: 50%;
text-decoration: none;
color: #fff;
transition: all .3s;
font-size: 1.5em;
}
#share_button:checked ~ .sm_list a:nth-child(1){
background-color: #3B5998;
transition-delay: 0.2s;
transform: translateX(-6em);
}
#share_button:checked ~ .sm_list a:nth-child(2){
background-color: #dd2553;
transition-delay: 0.2s;
transform: translateX(6em);
}
#share_button:checked ~ .sm_list a:nth-child(3){
background-color: #000f94;
transition-delay: 0.3s;
transform: translateX(12em);
}
#share_button:checked ~ .sm_list a:nth-child(4){
background-color: #1077ec;
transition-delay: 0.3s;
transform: translateX(-12em);
}
#share_button:checked ~ .sm_list a:nth-child(5){
background-color: rgb(10, 63, 0);
transition-delay: 0.4s;
transform: translateX(18em);
}
#share_button:checked ~ .sm_list a:nth-child(6){
background: linear-gradient(70deg,blue,green,red,yellow);
transition-delay: 0.4s;
transform: translateX(-18em);
}
/* Hovering Effects */
#share_button:checked ~ .sm_list a:nth-child(1):hover{
background-color: #ffffff;
color: #3B5998;
/* transition-delay: 0.2s;
transform: translateX(-6em); */
}
#share_button:checked ~ .sm_list a:nth-child(2):hover{
color: #dd2553;
background-color: #fff;
}
#share_button:checked ~ .sm_list a:nth-child(3):hover{
color: #000f94;
background-color: #fff;
}
#share_button:checked ~ .sm_list a:nth-child(4):hover{
color: #1077ec;
background-color: #fff;
}
#share_button:checked ~ .sm_list a:nth-child(5):hover{
color: rgb(10, 63, 0);
background-color: #fff;
}
#share_button:checked ~ .sm_list a:nth-child(6):hover{
color: black;
background-image: linear-gradient(90deg,white,grey);
}
span:visited{
background-color: #000f94;
}
Código JavaScript:
Javascript
// Selecting the html class and
// convert it to an object
const sharebtn =
document.querySelector('.sharebtn')
// Creating a bool variable for changing
// the image of share button
var bool = 0
// Adding an event listener
sharebtn.addEventListener('click', () => {
// As we clicked the mouse over
// the share button the bool value.
// get flipped and then working of
// if-else loop get starts
bool = !bool
if (bool == 0) {
sharebtn.innerHTML =
'<i class="far fa-share-square"></i>'
} else {
sharebtn.innerHTML =
'<i class="fas fa-times"></i>'
}
})
Pasos para ejecutar el código:
1. La estructura de nuestro proyecto se ve así
2. Abra el archivo index.html para iniciar el proyecto
Producción:
De esta forma, puede crear sus propios botones para compartir cambiando los identificadores sociales y los efectos de estilo.
Publicación traducida automáticamente
Artículo escrito por rahulmahajann y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA