Neon Lights Search Bar - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Neon Lights Search Bar</title> <style> body { margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background: #000; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; overflow: hidden; } .search-container { position: relative; width: 50%; border-radius: 25px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } .search-input { width: 100%; padding: 20px; border: none; font-size: 18px; border-radius: 25px; outline: none; transition: all 0.4s ease; background: #222; color: #fff; } .search-input:focus { box-shadow: 0 0 20px rgba(255, 0, 150, 0.5); } .search-button { position: absolute; right: -34px; top: 50%; transform: translateY(-50%); background: #ff0099; border: none; border-radius: 50%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease; } .search-button:hover { background: #ff66b2; } .search-icon { font-size: 20px; color: white; } </style> </head> <body> <div class="search-container"> <input type="text" class="search-input" placeholder="Search..."> <button type="button" class="search-button"> <span class="search-icon">🔍</span> </button> </div> </body> </html>