Search Bar Animation CSS

HTML
<div class="container"> <div class="search"> <input type="text" id="search_input"> <label for="search_input">Search...</label> <span><i class="material-icons">search</i></span> </div> <div class="shadow"></div> </div>
SCSS
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500'); html, body{ background: #f1f1f1; margin: 0; } *:focus { outline: none; } .shadow{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 50px; height: 50px; border-radius: 50%; background: -webkit-linear-gradient(left top, rgb(102, 102, 255), #a64dff); background: -o-linear-gradient(bottom right, rgb(102, 102, 255), #a64dff); background: -moz-linear-gradient(bottom right, rgb(102, 102, 255), #a64dff); background: linear-gradient(to bottom right, rgb(102, 102, 255), #a64dff); transition: width 0.25s, height 0.3s, border-radius 0.15s; transition-delay: 0.12s; z-index: 1; will-change: auto; } .search{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 50px; height: 50px; border-radius: 50%; background: -webkit-linear-gradient(left top, rgb(102, 102, 255), #a64dff); background: -o-linear-gradient(bottom right, rgb(102, 102, 255), #a64dff); background: -moz-linear-gradient(bottom right, rgb(102, 102, 255), #a64dff); background: linear-gradient(to bottom right, rgb(102, 102, 255), #a64dff); transition: width 0.2s, border-radius 0.7s; z-index: 50; transition-delay: 0.12s; will-change: width; &:after{ content: ''; display: block; position: absolute; top: 0; bottom: 0; right: 0; margin: auto; width: 0px; height: 0px; border-radius: 50%; background: rgba(255,255,255,1); transition: width 0.2s, height 0.5s, border-radius 0.3s; will-change: border-radius; } input{ display: none; position: absolute; background: rgba(0,0,0,0); height: 100%; border: none; padding-left: 10px; font-size: 17px; color: #444; z-index: 100; &+label{ color: #444; font-size: 17px; font-family: 'Roboto', sans-serif; line-height: 50px; padding-left: 10px; margin-top: 30px; opacity: 0; transition: all 0.1s; position: absolute; font-weight: 300; z-index: 100; } } span{ position: absolute; width: 50px; height: 50px; right: 0; z-index: 50; text-align: center; } span i{ color: white; font-size: 25px; line-height: 50px; } &:hover{ width: 250px; border-radius: 25px; transition: width 0.3s, border-radius 0.2s; background: rgba(0,0,0,0); transition-delay: 0.2s; span i{ color: #333; transition: color 0.3s; transition-delay: 0.2s; } &:after{ width: 100%; height: 100%; border-radius: 25px; transition: width 0.5s, height 0.3s, border-radius 0.6s; transition-delay: 0.3s; } & + .shadow{ width: 100%; height: 100%; border-radius: 0; transition: width 0.3s, height 0.19s, border-radius 0.4s ease-in; transition-delay: 0.2s; } input{ display: block; &:focus+label{ opacity: 0; transition: all 0.3s; } &+label{ display: block; opacity: 1; margin-top: 0; transition: all 0.5s; transition-delay: 0.6s; } } } } .search input::-webkit-input-placeholder { color: rgba(255,255,255,0.5); } .search input:-moz-placeholder { color: rgba(255,255,255,0.5); } .search input::-moz-placeholder { color: rgba(255,255,255,0.5); } .search input:-ms-input-placeholder { color: rgba(255,255,255,0.5); }
JAVASCRIPT
Expand for more options Login