WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Snippet HTML de links de mídias sociais
623
jad.bernoussi
Abrir no Editor
Publique Seu Código
0
Recomendado
10 July 2025
Exemplo de tela de carregamento animada em HTML com CSS
21 October 2025
Exemplo de modelo HTML básico
19 May 2025
animação de caixa de mosca 3D
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="account"> <a href="https://www.facebook.com/kasi.eswar.148"><i class='bx bxl-facebook'></i></a> <a href="https://instagram.com/dimple_charmboy"><i class='bx bxl-instagram'></i></a> <a href="https://twitter.com/KasiEswar8"><i class='bx bxl-twitter'></i></a> <a href="https://www.linkedin.com/in/kasi-eswar-6678b223a"><i class='bx bxl-linkedin'></i></a> <a href="https://web.whatsapp.com/"><i class='bx bxl-whatsapp'></i></a> <a href="https://www.youtube.com/"><i class='bx bxl-youtube' ></i></a> </div> </body> </html>
CSS
Copy
body{ width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; background-color: rgba(0, 0, 0, 0.845); } .account a{ display: inline-flex; justify-content: center; align-items: center; flex-wrap: wrap; width: 40px; height: 40px; background: transparent; border: 2px solid whitesmoke; border-radius: 50%; font-size: 25px; color: white; text-decoration: none; margin: 15px 10px 15px 0; position: relative; outline: none; transition: all 0.3s ease; } .account a:hover { background: whitesmoke; color: black; box-shadow: 0 0 20px white ; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
