WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML-Snippet für Social-Media-Links
71
jad.bernoussi
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
26 March 2025
Landingpage für ein Fahrradgeschäft
28 September 2025
Beispiel für eine CSS-Ladeanimation
23 August 2025
HTML/CSS-Vorlage für die Luxus-Anmeldeseite
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) */
