Scribd
Upload
18 views5 pages

HTML Lang

The document is an HTML page containing links to popular social media sites Facebook, Instagram, and WhatsApp. The CSS styles the links with circular backgrounds and icons that scale on hover.

Uploaded by

nos652853
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
18 views5 pages

HTML Lang

The document is an HTML page containing links to popular social media sites Facebook, Instagram, and WhatsApp. The CSS styles the links with circular backgrounds and icons that scale on hover.

Uploaded by

nos652853
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

<html lang="es">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Redes sociales</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/
all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/
E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous"
referrerpolicy="no-referrer"/>
<link rel="stylesheet" href="css/ejercicio.css">
</head>
<body>
<ul class="botones">
<li> <a href="#"><i class="fa-brands fa-facebook"></i></a></li>
<li> <a href="#"><i class="fa-brands fa-instagram"></i></a></li>
<li> <a href="#"><i class="fa-brands fa-whatsapp"></i>
</a></li>

</ul>
</body></html>
.botones{
padding: 0;
list-style: none;
margin: 1px;

}
.botones li {
margin: 0.15px;
position: relative;
display: inline-block;
font-size: 20px;
}
.botones i{
color:rgb(0, 0, 0);
position: absolute;
top: 21px;
left: 21px;
transition-duration: all 265ms ease-in-out;
}

.botones a{
display: inline-block;
color:black;
}
.botones a::before{
transform:scale(1);
content:'';
width: 60px;
height: 60px;
border-radius: 100%;
display: block;
background: linear-gradient(45deg, rgb(252, 64, 96), pink);
transition: all 265ms ease-out;
}
.botones a:hover::before{
transform:scale(0);
transition: all 265ms ease-in;
}
.botones a:hover i{
transform:scale(2,2);
color:rgb(252, 64, 96);
background: linear-gradient(45deg, rgb(252, 64, 96), pink);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

You might also like