WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Caixa de pesquisa
847
AmirAliAkrami
Abrir no Editor
Publique Seu Código
Recomendado
17 September 2024
Calculadora de datas
30 June 2025
Formulário de inscrição em HTML com e-mail e senha
14 September 2024
Loja de E-Commerce
HTML
Copy
HTML CSS
CSS
Copy
body{ margin: 0; padding: 0; background: #170a34; } .box{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .input { padding: 10px; width: 60px; height: 60px; background: none; border: 3px solid #ababff; border-radius: 50px; box-sizing: border-box; font-family: Comic Sans MS; font-size: 20px; color: #ababff; outline: none; transition: .8s; transition-delay: .2s; } .input.click{ padding: 10px; padding-right: 60px; width: 300px; background: #221b3d; border-radius: 10px; } .btn{ position: absolute; width: 60px; height: 60px; top: 0; right: 0; background: none; border: none; box-sizing: border-box; outline: none; cursor: pointer; transition: .2s; } span{ position: absolute; width: 40px; height: 3px; top: 65px; left: 65px; background: #ababff; border-radius: 50px; transform: translate(-50%,-50%) rotate(45deg); transition: .2s; } span:nth-child(1).click{ top: 50%; left: 50%; background: #cf0202; } span:nth-child(2){ top: 50%; left: 50%; opacity: 0; transition-delay: .2s; } span:nth-child(2).click{ transform: translate(-50%,-50%) rotate(-45deg); opacity: 1; background: #dc0505; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */