This is a search bar design with emphasis on UX. The input section adapts to the written text and while querying the search, a delightful animation...

This is a search bar design with emphasis on UX. The input section adapts to the written text and while querying the search, a delightful animation is showcased. It surely would work well with an ajax search to fetch the results first. Created by CodePen user Aaron Iker, based on dribble user Gale G's design.

A code experiment in CSS (Stylus) and JavaScript (Babel) depicting a simple digital clock. The code is simple to implement, and it shows the year, ...

A code experiment in CSS (Stylus) and JavaScript (Babel) depicting a simple digital clock. The code is simple to implement, and it shows the year, month and day (as well as the current hour, minute and second).

A cool set of examples of text input effects made in pure CSS. Most of them comply the Material guidelines, some actually seem to be inspired by Go...

A cool set of examples of text input effects made in pure CSS. Most of them comply the Material guidelines, some actually seem to be inspired by Google itself. The effects are really nice, however, some browsers may not support them so use an alternative version to avoid usability problems.

A CSS login form made with a material design style. It has a header where you can put a text, the username and the password input, and finally a su...

A CSS login form made with a material design style. It has a header where you can put a text, the username and the password input, and finally a submit button. Its colors can be styled and it can be implemented anywhere (website or mobile app).

A crafted CSS and JavaScript form created by Son Tran-Nguyen, perfect for any website subscription input field. Once you hover over the subscribe b...

A crafted CSS and JavaScript form created by Son Tran-Nguyen, perfect for any website subscription input field. Once you hover over the subscribe button you'll see a 3D rotating effect; the users type their email address, and after that they'll see another 3D effect for confirmation.

Arthurra from Codepen has uploaded this cross browser button that reveals a search bar input when we hover. The design is one cool thing in this fr...

Arthurra from Codepen has uploaded this cross browser button that reveals a search bar input when we hover. The design is one cool thing in this freebie; however, it can be improved by adding some lines of CSS to make it flatter, or by integrating it with the rest of the content on your website, blog or mobile app.

Here we can see a full width search bar, created by Luke Desroches, which achieves its flexibility using fluid widths of the input type=”text”. Whe...

Here we can see a full width search bar, created by Luke Desroches, which achieves its flexibility using fluid widths of the input type=”text”. When we use the widths in percentage, the element gets its width adjusted accordingly to the current window’s width.

This is a Search Bar that you must check out, made by Euan Mead. The magnifying glass is a base64 encoded image. The cross button is a reset contro...

This is a Search Bar that you must check out, made by Euan Mead. The magnifying glass is a base64 encoded image. The cross button is a reset control that hides when there is no text inside the search bar by Combining HTML5 required form attribute and the CSS3 :invalid pseudo class.

A very cool and a very long search bar created by Dan Eden. It uses an extra p tag to style the search bar (and the search icon) perfectly. It’s pu...

A very cool and a very long search bar created by Dan Eden. It uses an extra p tag to style the search bar (and the search icon) perfectly. It’s purely CSS3 and no images are used. Also, it has very lovely hover and active states, which can be edited with few CSS tweaks.

Learn how to make a super cool search input form for your website with CSS3 and jQuery. In this codecast, you'll see the use of labels as the input...

Learn how to make a super cool search input form for your website with CSS3 and jQuery. In this codecast, you'll see the use of labels as the input replacements for better styling and customization, and then some nice styling for the whole search box.

The element we see here is a flat yet realistic search bar for websites. It makes good use of colors among the features that compose it, like the t...

The element we see here is a flat yet realistic search bar for websites. It makes good use of colors among the features that compose it, like the text area, the input button and the container, making it very simple but easy to be integrated. This element has been created with HTML and CSS by Marco Biedermann.

This is an expandable search bar with flat style and focus capabilities. On its regular state, noting is focused on, integrating the search with th...

This is an expandable search bar with flat style and focus capabilities. On its regular state, noting is focused on, integrating the search with the rest of the content, but when the search is clicked, the search bar outshines the rest of the content, acquiring priority. The effects, functionality, and style get done by applying a combination of HTML, SASS and JavaScript. This was created by Kevin Gimbel.

This is just a regular search bar. Well, it actually does not have more than the text area, which has a minimal style with subtle inner shadows. Ho...

This is just a regular search bar. Well, it actually does not have more than the text area, which has a minimal style with subtle inner shadows. However, it can be used in tests, or to add it to some website that does not require more styling that this.

This code snippet creates a bar that resembles a cigarette burning. You can edit the HTML, CSS and JS code to make it more functional, and also, co...

This code snippet creates a bar that resembles a cigarette burning. You can edit the HTML, CSS and JS code to make it more functional, and also, cooler in style since it looks a little outdated.

This is a prototype for the regular and well known Google home page. It includes a revamp of Google’s search bar, with nice animated gradients and ...

This is a prototype for the regular and well known Google home page. It includes a revamp of Google’s search bar, with nice animated gradients and effects, although you can edit the HTML, SCSS and JS for the colors of the gradients, all in order to make them match the original logo style. Also, you can switch between two looks: Aurora and Night Mode.

This is an interesting and interactive UI resembling Google Now, which give you all the tools for searching, displaying information, and more. It i...

This is an interesting and interactive UI resembling Google Now, which give you all the tools for searching, displaying information, and more. It is partially functioning, meaning that you can see some cool effects; for example, when you hover over any element you'll see it enlarges, or when you click on the search bar, the background image disappears, so the user gets focused on what's important. It could be used as a nice widget on your website or blog. it was created by Bennett Feely.

This is the original Glowing Pulse Form search input that has inspired lots of people to create their own. It sure has a nice design, consisting of...

This is the original Glowing Pulse Form search input that has inspired lots of people to create their own. It sure has a nice design, consisting of borders and shadows throbbing like pulses when you click on the text area. It was crafted with HTML and CSS by Jack Rugile, and it's fully editable.

Here, we have a minimal search bar with nice design and crafted effects for making the search realistic in its own way. It was created with CSS and...

Here, we have a minimal search bar with nice design and crafted effects for making the search realistic in its own way. It was created with CSS and HTML by Zohar Yzgeav on Codepen, and it is perfect for a minimalist website, blog, or any mobile app.

This code experiment is a revamp of the Glowing Pulse Form with some additional styling. It was created with CSS and HTML by Flootershhhiyyyy, and ...

This code experiment is a revamp of the Glowing Pulse Form with some additional styling. It was created with CSS and HTML by Flootershhhiyyyy, and it features the text area (with a nice glow when clicked) and submit button. It is not functional, but it can with some Javascript or jQuery.

This is as the title suggests, a clean search form available in code version, ready to use and also in PSD format for changing the colors and effec...

This is as the title suggests, a clean search form available in code version, ready to use and also in PSD format for changing the colors and effects as you like. This search form is designed in CSS3 and has a simple jQuery validation with a pop-up appearing if the user doesn’t fill out the search field.

Here, we have a nice Dribbble rebound of the Search Bar by Liang Shi that was brought to life by shyles25. It is a search input that has a simple, ...

Here, we have a nice Dribbble rebound of the Search Bar by Liang Shi that was brought to life by shyles25. It is a search input that has a simple, clean and minimal style. It lacks functionality, but it is nothing a few lines of code can't solve. You can also change the CSS to improve the appearance of the element or integrate it directly into your website.