WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Effet de survol du bouton d'action d'appel
1561
ledoc
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
26 August 2025
Site Web de portfolio turc : HTML, CSS, JS, Tailwind
22 May 2025
Jeu de pile ou face
27 October 2023
Jeu de Tetris simple
HTML
Copy
CSS
Copy
html, body { padding: 0; margin: 0; height: 100%; width: 100%; } * { box-sizing: border-box; } .wrapper { height: 100%; display: flex; justify-content: center; align-items: center; background-color: #fff9c1; } .navbar { position: relative; height: 100px; min-width: 400px; padding-left: 35px; padding-right: 35px; display: flex; justify-content: space-between; align-items: center; border-radius: 25px; background-color: white; box-shadow: 0 10px 20px rgba(82, 74, 74, 0.3); } .navbar:after { content: ""; position: absolute; bottom: 7px; height: 4px; width: 35%; left: 50%; transform: translateX(-50%); background-color: gray; opacity: 0.3; } .circle { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100px - 40px); margin-bottom: 0; height: 80px; width: 80px; border-radius: 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; background-color: #ff5e00; z-index: 9; box-shadow: 0 5px 5px rgba(255, 147, 85, 0.35); transition: height 0.3s; } .circle:hover { height: 270px; border-radius: 50px; } .circle .plus-icon { color: white; font-size: 27px; transition: opacity 0.3s, transform 0.2s; } .circle:hover .plus-icon { transform: rotate(360deg); opacity: 0; } .circle .social { position: absolute; top: 195px; color: white; background-color: rgba(255, 212, 212, 0.308); height: 60px; width: 60px; margin-bottom: 5px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 25px; cursor: pointer; } .circle .social:nth-child(2) { opacity: 0; transition: opacity 0.3s, top 0.5s ease; } .circle .social:nth-child(3) { opacity: 0; transition: opacity 0.3s, top 0.5s 0.1s ease; } .circle .social:nth-child(4) { opacity: 0; transition: opacity 0.3s, top 0.5s 0.22s ease; margin-bottom: 0px; } .circle:hover .social:nth-child(2) { opacity: 1; top: 5px; } .circle:hover .social:nth-child(3) { opacity: 1; top: calc(5px + 60px + 5px); } .circle:hover .social:nth-child(4) { opacity: 1; top: calc(5px + 60px + 5px + 60px + 5px); } .circleBackground { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100px - 100px / 2); margin-bottom: 0; height: calc(80px + 20px); width: calc(80px + 20px); border-radius: calc(100px / 2); background-color: #7f0a0a; } .icon-home, .icon-settings { font-size: 29px; color: #7f0a0a; }
JS
Copy
<script> let links = document.querySelectorAll('li.link'); let buble = document.querySelector('.buble'); links.forEach(el=>el.addEventListener('click',(e)=>{ document.querySelector('li.active').classList.remove('active') el.classList.add('active'); buble.style.left = `${el.offsetLeft + 8}px` })) </script>