Inicio
Buscar
Ingresar
Registrarse
Starfield: el juego que revolucionará el espacio y la tecnología
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 7077 veces)
R3LI4NT
{ L4 } Geek
Mensajes: 396
El poder del usuario radica en su ANONIMATO.
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
<!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>Botones ToolTIP</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<h1>Botones con efecto ToolTIP</h1>
<div class="container">
<div class="icon facebook">
<div class="tooltip">Facebook</div>
<span><i class="fab fa-facebook-f"></i></span>
</div>
<div class="icon instagram">
<div class="tooltip">Instagram</div>
<span><i class="fab fa-instagram"></i></span>
</div>
<div class="icon twitter">
<div class="tooltip">Twitter</div>
<span><i class="fab fa-twitter"></i></span>
</div>
<div class="icon whatsapp">
<div class="tooltip">WhatsApp</div>
<span><i class="fab fa-whatsapp"></i></span>
</div>
</div>
</body>
</html>
Código CSS
Código: CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');
*
{
margin
:
0
;
padding
:
0
;
box-sizing
:
border-box
;
font-family
:
'Poppins'
,
sans-serif
;
}
body
{
display
:
flex
;
height
:
100vh
;
width
:
100%
;
justify-content
:
center
;
align-items
:
center
;
background
:
#ecf0f1
;
}
h1
{
position
:
absolute
;
top
:
120px
;
font-style
:
italic
;
}
.container
{
display
:
inline-flex
;
}
.container
.icon
{
display
:
flex
;
position
:
relative
;
margin
:
0
30px
;
text-align
:
center
;
align-items
:
center
;
justify-content
:
center
;
flex-direction
:
column
;
cursor
:
pointer
;
z-index
:
2
;
transition
:
0.5s cubic-bezier
(
0.70
,
-
0.55
,
0.30
,
1.5
)
;
}
.container
.icon
span
{
display
:
block
;
height
:
50px
;
width
:
50px
;
border-radius
:
50%
;
background
:
#fff
;
color
:
#000
;
text-shadow
:
-1px
2px
3px
rgba
(
0
,
0
,
0
,
.30
)
;
box-shadow
:
0
7px
10px
rgba
(
0
,
0
,
0
,
0.2
)
;
line-height
:
50px
;
font-size
:
22px
;
position
:
relative
;
z-index
:
2
;
transition
:
0.5s cubic-bezier
(
0.70
,
-
0.55
,
0.30
,
1.5
)
;
}
.container
.icon
.tooltip
{
position
:
absolute
;
padding
:
7px
15px
;
font-size
:
16px
;
border-radius
:
15px
;
top
:
0
;
z-index
:
1
;
background
:
#fff
;
color
:
#fff
;
opacity
:
0
;
pointer-events
:
none
;
box-shadow
:
0
7px
10px
rgba
(
0
,
0
,
0
,
0.2
)
;
transition
:
0.5s cubic-bezier
(
0.70
,
-
0.55
,
0.30
,
1.5
)
;
}
.icon
.tooltip
:before
{
content
:
''
;
position
:
absolute
;
height
:
15px
;
width
:
15px
;
left
:
50%
;
bottom
:
-8px
;
transform
:
translateX
(
-50%
)
rotate
(
45deg
)
;
background
:
#fff
;
transition
:
0.5s cubic-bezier
(
0.70
,
-
0.55
,
0.30
,
1.5
)
;
}
.container
.icon
:hover
.tooltip
{
top
:
-60px
;
opacity
:
1
;
pointer-events
:
auto
;
}
.container
.icon
:hover
span
{
color
:
#fff
;
}
.container
.facebook
:hover
span
,
.container
.facebook
:hover
.tooltip
,
.container
.facebook
:hover
.tooltip
:before
{
background
:
#3b5998
;
}
.container
.facebook
:hover
span
,
.container
.facebook
:hover
.tooltip
{
box-shadow
:
inset
0
0
5px
2px
rgba
(
0
,
0
,
0
,
0.2
)
;
}
.container
.instagram
:hover
span
,
.container
.instagram
:hover
.tooltip
,
.container
.instagram
:hover
.tooltip
:before
{
background
:
#DD2A7B
;
}
.container
.instagram
:hover
span
,
.container
.instagram
:hover
.tooltip
{
box-shadow
:
inset
0
0
5px
2px
rgba
(
0
,
0
,
0
,
0.2
)
;
}
.container
.twitter
:hover
span
,
.container
.twitter
:hover
.tooltip
,
.container
.twitter
:hover
.tooltip
:before
{
background
:
#00ACEE
;
}
.container
.twitter
:hover
span
,
.container
.twitter
:hover
.tooltip
{
box-shadow
:
inset
0
0
5px
2px
rgba
(
0
,
0
,
0
,
0.2
)
;
}
.container
.whatsapp
:hover
span
,
.container
.whatsapp
:hover
.tooltip
,
.container
.whatsapp
:hover
.tooltip
:before
{
background
:
#25D366
;
}
.container
.whatsapp
:hover
span
,
.container
.whatsapp
:hover
.tooltip
{
box-shadow
:
inset
0
0
5px
2px
rgba
(
0
,
0
,
0
,
0.2
)
;
}
#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
Angelleder
{ L0 } Ñuub
Mensajes: 3
Ahora la presa se convierte en cazador
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]
Va un mudo y le dice a un sordo: Hack x Crack usa cookies. Pues eso...
OK
Learn more