CSS experiments with a search form input and button.
In this collection are the pens for anything related to search box,
search bar, global search area that we can put to a website page.
Searching Animation
Inspired by Another Set of Eyes by Frank Rodriguez.*needs work in Firefox but looks quite nice in Chrome and Safari. Made by
Ryan Mulligan. 24 April, 2016.
Demo
Download (7.7kb)
Search-input With inset Shadow
Made by Håvard Brynjulfsen. April 24, 2016.
Animated Search Form
Made by Kyle. April 22, 2016
Search Input Context Animation
- CSS icons
- Context animation
- Telegram App-like search loading effect
Made by Riccardo Zanutta. April 19, 2016.
Prefixbox Instant Search Box
Design originally forked from sartios’s Pen Search Box: Expand on Hover.
Made by Sverrir Sigmundarson. April 12, 2016.
Simple Mobile Search Input
This is an example of search input, that could be put in a mobile template for an e-commerce or wheather or much more. Made by Tommaso Poletti. April 12, 2016.
Animated Search Input
Made by Francesco Michelini. April 01, 2016.
Search Menu Animation
Made by ChenCody. March 16, 2016.
Diagonal Menu With Search
A small menu demo. Made by Jermaine. March 11, 2016.
Search Box
Search concept with options. Made by Fabio Ottaviani. March 10, 2016.
Search Form Concep
A little search concept. Made by Rune Sejer Hoffmann. February 07, 2016.
Animating Search Box
An animating search box made with HTML & CSS. Made by Jarno van Rhijn. February 03, 2016.
Search Green Box
An interesting effect of search action. Made by Konstantin Solodovnik. February 05, 2016.
CSS Expanding Search Box
An expanding search box/form powered purely by CSS. Made by WebDevStudios. February 02, 2016.
Search Animation
Made by Dmitriy. January 27, 2016.
Flat CSS Search Box Concept With Loading Animation
Concept for a simple dynamic search box with a loading animation that’s displayed in the search field. Made by Ines Montani. January 24, 2016.
Search Form Animation
Small Angular animation (could easily be vanilla js) to show user that a search result is pending. This is good UI to let the user know the server is working. Uses CSS flexbox. Made by
Brendan Quinn. January 21, 2016.
CSS Search Box
It searches things, probably something similar been done before. Made by Jamie Coulter. January 12, 2016.
Compact Search Input
Input[type=“search”] with transition from magnifier icon to field.Inspiration: Sandeep Virk’s dribble
https://dribbble.com/shots/1992789-Search. Made by Uli Schumacher. January 12, 2016.
Search Box
Made by Marco Livi. January 07, 2016.
Search Transformation
Interactive prototype of search form transformation.
Originally made by Alex Pronsky (https://dribbble.com/aPronsky).
Dribble item: https://dribbble.com/shots/2308755-Search-Transform-Principle-Freebie. Made by Lucas Bourdallé. October 22, 2015.
CSS Animated And Responsive Search Button Concept
A pure css search button that expends to a text input and a search button on click.
It uses css transitions for animation and media queries to be full width under 480px. Made by napssy. October 21, 2015.
Expand Search Button
Button expands when hovering and shows search field. Made by Caroline Vermeir. October 06, 2015.
Minimalistic Search
Lightly designed, expanding/collapsing search field. Clicking on
“Search” expands into an input field, and clicking on the “X” clears the
field and collapses it back to its initial state.
Made by Ryan Altvater. August 05, 2015.
Search Input Focus Animation
A simple animation for the focus event on a search input. Made by Nicolás J. Engler. July 26, 2015.
Search Input With Animation
Made by Arlina Design. April 12, 2015.