27 Search Boxes With HTML and CSS – CSS Paradise

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 by
Ryan Mulligan. 24 April, 2016.
Demo
Download (7.7kb)

Demo Search-input With inset Shadow

Search-input With inset Shadow
Made by Håvard Brynjulfsen. April 24, 2016.

Demo
Download (3.4kb)

Demo Animated Search Form

Animated Search Form
Made by Kyle. April 22, 2016

Demo
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.

Demo
Download (6.7kb)

Demo Prefixbox Instant Search Box

Prefixbox Instant Search Box
Design originally forked from sartios’s Pen Search Box: Expand on Hover.

Made by Sverrir Sigmundarson. April 12, 2016.

Demo
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.

Demo
Download (3.3kb)

Demo Animated Search Input

Animated Search Input
Made by Francesco Michelini. April 01, 2016.

Demo
Download (8.5kb)

Demo Search Menu Animation

Search Menu Animation
Made by ChenCody. March 16, 2016.

Demo
Download (1.8kb)

Demo Diagonal Menu With Search

Diagonal Menu With Search
A small menu demo. Made by Jermaine. March 11, 2016.

Demo
Download (4.3kb)

Demo Search Box

Search Box
Search concept with options. Made by Fabio Ottaviani. March 10, 2016.

Demo
Download (5.9kb)

Demo Search Form Concep

Search Form Concep
A little search concept. Made by Rune Sejer Hoffmann. February 07, 2016.

Demo
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
Download (3.9kb)

Demo Search Green Box

Search Green Box
An interesting effect of search action. Made by Konstantin Solodovnik. February 05, 2016.

Demo
Download (2.7kb)

Demo CSS Expanding Search Box

CSS Expanding Search Box
An expanding search box/form powered purely by CSS. Made by WebDevStudios. February 02, 2016.

Demo
Download (6kb)

Demo Search Animation

Search Animation
Made by Dmitriy. January 27, 2016.

Demo
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.

Demo
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
Download (6.5kb)

Demo CSS Search Box

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

Demo
Download (4.1kb)

Demo Compact Search Input

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.

Demo
Download (3.1kb)

Demo Search Box

Search Box
Made by Marco Livi. January 07, 2016.

Demo
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
Download (2.3kb)

Demo CSS Animated And Responsive Search Button Concept

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.

Demo
Download (4.1kb)

Demo Expand Search Button

Expand Search Button
Button expands when hovering and shows search field. Made by Caroline Vermeir. October 06, 2015.

Demo
Download (1.9kb)

Demo Minimalistic Search

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.

Demo
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.

Demo
Download (7.1kb)

Demo Search Input With Animation

Search Input With Animation
Made by Arlina Design. April 12, 2015.

Demo
Downlaod (2kb)

Leave a comment

Your email address will not be published.