Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title>Fantastisches Suchfeld</title> <style> body { margin: 0; padding: 0; background: #00a08d; } .search-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #666666; height: 40px; border-radius: 40px; padding: 10px; } .search-box:hover > .search-txt { width: 240px; padding: 0 6px; } .search-box:hover > .search-btn { background: white; color: black; } .search-btn { color: #eeeeee; float: right; width: 40px; height: 40px; border-radius: 50%; background: #2f3640; display: flex; justify-content: center; align-items: center; transition: 0.4s; color: white; cursor: pointer; text-decoration:none; } .search-btn > i { font-size: 20px; } .search-txt { border: none; background: none; outline: none; float: left; padding: 0; color: white; font-size: 16px; transition: 0.4s; line-height: 40px; width: 0px; font-weight: bold; } } </style> </head> <body> <div class="search-box"> <input type="text" name="" class="search-txt" placeholder=" Geben Sie den zu suchenden Text ein"/> <a class="search-btn" href="#"> <i class="fa fa-search" aria-hidden="true"></i> </a> </div> </body> </html>