27 Search Boxes With HTML and CSS

Public on May 2, 2016

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.

Demo Searching Animation

Searching Animation
Inspired by Another Set of Eyes by Frank Rodriguez.*needs work in Firefox but looks quite nice in Chrome and Safari. Made byRyan Mulligan. 24 April, 2016.
Download (7.7kb)

Demo Search-input With inset Shadow

Search-input With inset Shadow
Made by Håvard Brynjulfsen. April 24, 2016.
Download (3.4kb)

Demo Animated Search Form

Animated Search Form
Made by Kyle. April 22, 2016
Download (5kb)

Demo Search Input Context Animation

Search Input Context Animation
  • CSS icons
  • Context animation
  • Telegram App-like search loading effect
Made by Riccardo Zanutta. April 19, 2016.
Download (6.7kb)

Demo Prefixbox Instant Search Box

Prefixbox Instant Search BoxDesign originally forked from sartios’s Pen Search Box: Expand on Hover. Made by Sverrir Sigmundarson. April 12, 2016.
Download (4.7kb)

Demo Simple Mobile Search Input

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.
Download (3.3kb)

Demo Animated Search Input

Animated Search Input
Made by Francesco Michelini. April 01, 2016.
Download (8.5kb)

Demo Search Menu Animation

Search Menu Animation
Made by ChenCody. March 16, 2016.
Download (1.8kb)

Demo Diagonal Menu With Search

Diagonal Menu With Search
A small menu demo. Made by Jermaine. March 11, 2016.
Download (4.3kb)

Demo Search Box

Search Box
Search concept with options. Made by Fabio Ottaviani. March 10, 2016.
Download (5.9kb)

Demo Search Form Concep

Search Form ConcepA little search concept. Made by Rune Sejer Hoffmann. February 07, 2016.
Download (4.9kb)

Demo Animating Search Box

Animating Search Box
An animating search box made with HTML & CSS. Made by Jarno van Rhijn. February 03, 2016.

Demo Search Green Box

Search Green Box
An interesting effect of search action. Made by Konstantin Solodovnik. February 05, 2016.
Download (2.7kb)

Demo CSS Expanding Search Box

CSS Expanding Search Box
An expanding search box/form powered purely by CSS. Made byWebDevStudios. February 02, 2016.
Download (6kb)

Demo Search Animation

Search Animation
Made by Dmitriy. January 27, 2016.
Download (7kb)

Demo Flat CSS Search Box Concept With Loading Animation

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.
Download (4kb)

Demo Search Form Animation

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.

Demo CSS Search Box

CSS Search Box
It searches things, probably something similar been done before. Made by Jamie Coulter. January 12, 2016.
Download (4.1kb)

Demo Compact Search Input

Compact Search Input
Input[type=“search”] with transition from magnifier icon to field.Inspiration: Sandeep Virk’s dribblehttps://dribbble.com/shots/1992789-Search. Made by Uli Schumacher. January 12, 2016.
Download (3.1kb)

Demo Search Box

Search Box
Made by Marco Livi. January 07, 2016.
Download (3.4kb)

Demo Search Transformation

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.

Demo CSS Animated And Responsive Search Button Concept

CSS Animated And Responsive Search Button ConceptA 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.
Download (4.1kb)

Demo Expand Search Button

Expand Search Button
Button expands when hovering and shows search field. Made byCaroline Vermeir. October 06, 2015.
Download (1.9kb)

Demo Minimalistic Search

Minimalistic SearchLightly 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.
Download (5kb)

Demo Search Input Focus Animation

Search Input Focus Animation
A simple animation for the focus event on a search input. Made by Nicolás J. Engler. July 26, 2015.
Download (7.1kb)

Demo Search Input With Animation

Search Input With AnimationMade by Arlina Design. April 12, 2015.
Downlaod (2kb)

[Advertising]Faster Thinking - Speed up your brain

Faster Thinking Game

sentiment_satisfied Emoticon