Hack x Crack - Comunidad de Seguridad informática

Programación => Programación Web => Mensaje iniciado por: R3LI4NT en Septiembre 14, 2021, 05:50:49 am

Título: Botones con efecto ToolTIP [HTML] [CSS]
Publicado por: R3LI4NT 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 (https://es.wikipedia.org/wiki/Informaci%C3%B3n_sobre_herramientas#:~:text=En%20el%20campo%20de%20la,sobre%20el%20que%20se%20encuentra)

(https://i.ibb.co/p4VsgrP/ezgif-com-gif-maker.gif)

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:wght@400&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
Título: Re:Botones con efecto ToolTIP [HTML] [CSS]
Publicado por: Angelleder 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!