WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Search box
1107
AmirAliAkrami
Open In Editor
Publish Your Code
Recommended
28 July 2023
CSS Search Bar
19 May 2025
3d fly box anımatıon
19 May 2025
flex-box card
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) */