Search

Your content goes here.
Search Bar

Animated Search Bar with radius

h1 { color: Cherry; text-align: center; } body { background-image: linear-gradient(to right, #10928f, #ABE7FE); } .topDiv { position: absolute; top: 50%; left: 50%; transform: translate(-40%, 40%); height: 40px; border-radius: 40px; padding: 10px; background: #2f3640; border-radius: 40px; padding: 10px; } .topDiv:hover>.searchBar { width: 250px; padding: 0 5px; } .topDiv:hover>.button { background: white; color: Navy Blue; } .button { color: black; float: right; height: 45px; border-radius: 50%; background: yellow; width: 45px; justify-content: center; align-items: center; transition: 0.35s; display: flex; align-items: center; transition: 0.35s; } .searchBar { border: none; background: none; float: left; padding: 0; color: white; outline: none; transition: 0.4s; line-height: 40px; font-size: 16px; width: 0px; line-height: 40px; padding: 0; color: white; } @media screen and (max-width: 630px) { .topDiv:hover>.searchBar { width: 160px; padding: 0 5px; } }