• Inicio
  • Buscar
  • Ingresar
  • Registrarse

    Samsung duplica su eficiencia en sus nuevos chips de 3 nanómetros

    • Hack x Crack - Comunidad de Seguridad informática »
    • Programación »
    • Programación Web »
    • Botones con efecto ToolTIP [HTML] [CSS]
    • Imprimir
    Páginas: [1]   Ir Abajo

    Autor Tema: Botones con efecto ToolTIP [HTML] [CSS]  (Leído 2307 veces)

    Desconectado R3LI4NT

    • { L4 } Geek
    • ****
    • Mensajes: 306
    • El poder del usuario radica en su ANONIMATO.
      • Ver Perfil
      • GitHub
    Botones con efecto ToolTIP [HTML] [CSS]
    « en: Septiembre 14, 2021, 05:50:49 am »
    Botones con efecto ToolTIP

    Los globos son una variación de los globos de ayuda y es un complemento muy usado en programación y diseño, dado que proporcionan información adicional sin necesidad de que el usuario la solicite de forma activa.

    Fuente



    Código HTML

    Código: Text
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Botones ToolTIP</title>
    8.     <link rel="stylesheet" href="style.css">
    9.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    10. </head>
    11. <body>
    12.     <h1>Botones con efecto ToolTIP</h1>
    13.     <div class="container">
    14.         <div class="icon facebook">
    15.             <div class="tooltip">Facebook</div>
    16.             <span><i class="fab fa-facebook-f"></i></span>
    17.         </div>
    18.         <div class="icon instagram">
    19.             <div class="tooltip">Instagram</div>
    20.             <span><i class="fab fa-instagram"></i></span>
    21.         </div>
    22.         <div class="icon twitter">
    23.             <div class="tooltip">Twitter</div>
    24.             <span><i class="fab fa-twitter"></i></span>
    25.         </div>
    26.         <div class="icon whatsapp">
    27.             <div class="tooltip">WhatsApp</div>
    28.             <span><i class="fab fa-whatsapp"></i></span>
    29.         </div>
    30.     </div>
    31. </body>
    32. </html>
    33.  

    Código CSS

    Código: CSS
    1. @import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected]&display=swap');
    2.  
    3. * {
    4.     margin: 0;
    5.     padding: 0;
    6.     box-sizing: border-box;
    7.     font-family: 'Poppins', sans-serif;
    8. }
    9.  
    10. body {
    11.     display: flex;
    12.     height: 100vh;
    13.     width: 100%;
    14.     justify-content: center;
    15.     align-items: center;
    16.     background: #ecf0f1;
    17. }
    18.  
    19. h1 {
    20.     position: absolute;
    21.     top: 120px;
    22.     font-style: italic;
    23. }
    24.  
    25. .container {
    26.     display: inline-flex;
    27. }
    28.  
    29. .container .icon {
    30.     display: flex;
    31.     position: relative;
    32.     margin: 0 30px;
    33.     text-align: center;
    34.     align-items: center;
    35.     justify-content: center;
    36.     flex-direction: column;
    37.     cursor: pointer;
    38.     z-index: 2;
    39.     transition: 0.5s cubic-bezier(0.70, -0.55, 0.30, 1.5);
    40. }
    41.  
    42. .container .icon span {
    43.     display: block;
    44.     height: 50px;
    45.     width: 50px;
    46.     border-radius: 50%;
    47.     background: #fff;
    48.     color: #000;
    49.     text-shadow: -1px 2px 3px rgba(0,0,0,.30);
    50.     box-shadow: 0 7px 10px rgba(0,0,0,0.2);
    51.     line-height: 50px;
    52.     font-size: 22px;
    53.     position: relative;
    54.     z-index: 2;
    55.     transition: 0.5s cubic-bezier(0.70, -0.55, 0.30, 1.5);
    56. }
    57.  
    58. .container .icon .tooltip {
    59.     position: absolute;
    60.     padding: 7px 15px;
    61.     font-size: 16px;
    62.     border-radius: 15px;
    63.     top: 0;
    64.     z-index: 1;
    65.     background: #fff;
    66.     color: #fff;
    67.     opacity: 0;
    68.     pointer-events: none;
    69.     box-shadow: 0 7px 10px rgba(0,0,0,0.2);
    70.     transition: 0.5s cubic-bezier(0.70, -0.55, 0.30, 1.5);
    71. }
    72.  
    73. .icon .tooltip:before {
    74.     content: '';
    75.     position: absolute;
    76.     height: 15px;
    77.     width: 15px;
    78.     left: 50%;
    79.     bottom: -8px;
    80.     transform: translateX(-50%) rotate(45deg);
    81.     background: #fff;
    82.     transition: 0.5s cubic-bezier(0.70, -0.55, 0.30, 1.5);
    83. }
    84.  
    85. .container .icon:hover .tooltip {
    86.     top: -60px;
    87.     opacity: 1;
    88.     pointer-events: auto;
    89. }
    90.  
    91. .container .icon:hover span {
    92.     color: #fff;
    93. }
    94.  
    95. .container .facebook:hover span,
    96. .container .facebook:hover .tooltip,
    97. .container .facebook:hover .tooltip:before {
    98.     background: #3b5998 ;
    99. }
    100.  
    101. .container .facebook:hover span,
    102. .container .facebook:hover .tooltip {
    103.     box-shadow: inset 0 0 5px 2px rgba(0,0,0,0.2);
    104. }
    105.  
    106. .container .instagram:hover span,
    107. .container .instagram:hover .tooltip,
    108. .container .instagram:hover .tooltip:before {
    109.     background: #DD2A7B ;
    110. }
    111.  
    112. .container .instagram:hover span,
    113. .container .instagram:hover .tooltip {
    114.     box-shadow: inset 0 0 5px 2px rgba(0,0,0,0.2);
    115. }
    116.  
    117. .container .twitter:hover span,
    118. .container .twitter:hover .tooltip,
    119. .container .twitter:hover .tooltip:before {
    120.     background: #00ACEE ;
    121. }
    122.  
    123. .container .twitter:hover span,
    124. .container .twitter:hover .tooltip {
    125.     box-shadow: inset 0 0 5px 2px rgba(0,0,0,0.2);
    126. }
    127.  
    128. .container .whatsapp:hover span,
    129. .container .whatsapp:hover .tooltip,
    130. .container .whatsapp:hover .tooltip:before {
    131.     background: #25D366;
    132. }
    133.  
    134. .container .whatsapp:hover span,
    135. .container .whatsapp:hover .tooltip {
    136.     box-shadow: inset 0 0 5px 2px rgba(0,0,0,0.2);
    137. }
    138.  


    #R3LI4NT
    En línea

    No contesto dudas por MP, si las tienes, las planteas en el foro.

    Road To Hacking v3: https://github.com/R3LI4NT/road-to-hacking

    Desconectado Angelleder

    • { L0 } Ñuub
    • Mensajes: 3
    • Ahora la presa se convierte en cazador
      • Ver Perfil
    Re:Botones con efecto ToolTIP [HTML] [CSS]
    « Respuesta #1 en: Septiembre 16, 2021, 12:33:27 pm »
    Están super bien por el hover que tienen cuando te pones encima que salga el hombre de las redes sociales.

    Gracias!
    En línea
    Trabajando el apartado de CSS en:
    https://patineteselectricosbaratos.com/

    • Imprimir
    Páginas: [1]   Ir Arriba
    • Hack x Crack - Comunidad de Seguridad informática »
    • Programación »
    • Programación Web »
    • Botones con efecto ToolTIP [HTML] [CSS]
     

    • SMF | SMF © 2013, Simple Machines
    • XHTML
    • RSS
    • WAP2
    Va un mudo y le dice a un sordo: Hack x Crack usa cookies. Pues eso... Learn more