Uno de los elementos más comunes en un desarrollo web es un menú de redes sociales. Es preciso disponer de uno o varias barras de botones a través de los cuáles se pueda enlazar con las redes sociales asociadas al portal web. Mi propósito es mostrar un ejemplo clásico que puedes incorporar a tu diseño prácticamente de inmediato.

Como vas a comprobar al leer el código fuente, es muy sencillo. Sin embargo, verás que el resultado es bastante bueno. Lo primero es mostrar el archivo escrito en HTML5.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu Redes Sociales</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">

</head>
<body>
    
    <section class="buttons">

        <a href="#" class="fa fa-facebook"></a>
        <a href="#" class="fa fa-twitter"></a>
        <a href="#" class="fa fa-instagram"></a>
        <a href="#" class="fa fa-youtube"></a>
        <a href="#" class="fa fa-linkedin"></a>

    </section>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</body>
</html>

A continuación, veremos el fichero CSS que dará forma a este menú de redes sociales.

* {
    margin: 0;
    padding: 0;
    box-sizing: content-box;
}

body {
    background-color: #f1f1f1;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.buttons {

    min-width:  700px;
    display: flex;
    justify-content: space-around;
        
}

.buttons a {

    text-decoration: none;
    font-size: 28px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: #314652;
    color: #ffffff;
    border-radius: 50%;
    box-shadow: 2px 2px 5px rgba ( 0, 0, 0, .5 );
    transition: all .4s ease-in-out;

}

.buttons a:hover {

    transform: scale(1.8)

}

El resultado que obtendrás con este código te lo muestro en la siguiente imagen:

ejemplo del menu de redes sociales
ejemplo del menu de redes sociales

Dejar respuesta

Please enter your comment!
Please enter your name here