WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Botão de ação de chamada Efeito de foco
1558
ledoc
Abrir no Editor
Publique Seu Código
Recomendado
15 May 2025
Modelo de site de comércio eletrônico HTML CSS
28 January 2025
BOTÃO
2 October 2025
Trecho de animação de carregamento CSS
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>