Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Der Titel des Dokuments</title> <style> *, *::after, *::before { margin: 0; padding: 0; box-sizing: inherit; } html { font-size: 50%; } body { box-sizing: border-box; } .container { width: 25rem; height: 100%; margin: 0 1rem; position: relative; } h2 { margin: 2rem; font-size: 20px; } .searchbar { font-size: 2.4rem; width: 25rem; height: 5rem; border: none; outline: none; border-radius: 10rem; padding: 2rem; transition: all .1s; transition-delay: .1s; } .searchbar:hover { width: 27rem; height: 6rem; } .button { height: 2rem; position: absolute; top: 1.5rem; right: 1rem; transition: all .1s; transition-delay: .1s; } .button:hover { cursor: pointer; } .searchbar:hover + .button { height: 2.5rem; top: 1.8rem; right: 0; } .searchbar::placeholder { opacity: .3; } </style> </head> <body> <h2>Suchfeld erstellen</h2> <div class="container"> <input type="text" maxlength= "12" placeholder="Search" class="searchbar"> <img src="https://images-na.ssl-images-amazon.com/images/I/41gYkruZM2L.png" alt="search icon" class="button"> </div> </body> </html>