Awesome Search Box

30.03.2021

Awesome search box. Using only HTML & CSS.

Made with: HTML,CSS

View Code

PlaceholderAwesome Search Box

Search Box

26.10.2020

Made with: HTML,CSS

View Code

Search Box

Search Box Animation

13.09.2020

Made with: HTML,CSS

View Code

PlaceholderSearch Box Animation

Search Input Caret Jump

21.07.2020

A search input animation in which the magnifying glass handle flies off, becomes a caret, and plants itself into the field.

Made with: HTML,CSS

View Code

Search Input Caret Jump

Search Box Animation

21.07.2020

Made with: HTML,CSS

View Code

PlaceholderSearch Box Animation

Custom Search

25.04.2020

Custom CSS search box with shadow and smoke text.

Made with: HTML,CSS (SCSS)

View Code

PlaceholderCustom Search

Search Animation - Only Css

8.03.2020

Made with: HTML,CSS (SCSS)

View Code

PlaceholderSearch Animation - Only Css

Animated Search Interaction

19.12.2019

A search animation where the head of the magnifying glass becomes the field and the handle grows into a search button. HTML5 validation of non-blank input ensures the field stays open when tabbing to the Search button.

Made with: HTML,CSS

View Code

PlaceholderAnimated Search Interaction

Skeuomorphic Search Input

2.12.2019

Made with: HTML,CSS (SCSS)

View Code

PlaceholderSkeuomorphic Search Input

:Placeholder-Shown Selector

12.10.2019

Trying out the :placeholder-shown selector to make a search form. With no JS, it validates and shows/hides the submit button.

Made with: HTML,CSS (SCSS)

View Code

Placeholder:Placeholder-Shown Selector

Search Box Version 2

18.02.2019

Made with: HTML (Pug),CSS (SCSS),JS

View Code

Search Box Version 2

Search Box Focus Effect

8.02.2019

Adding a thick outline on focus.

Made with: HTML,CSS (SCSS)

View Code

PlaceholderSearch Box Focus Effect

Search Input Animation

7.11.2018

A small little pure CSS animation of search interaction.

Made with: HTML,CSS (SCSS)

View Code

PlaceholderSearch Input Animation

Pure Css Animated Search Bar

30.10.2018

Animated seach box using pure HTML & CSS.

Made with: HTML,CSS

View Code

PlaceholderPure Css Animated Search Bar

Search Form With Animated Search Button

15.09.2018

Search form with animated search button which transforms into right arrow on hover.

Made with: HTML,CSS

View Code

Search Form With Animated Search Button

Expandable Search Bar Animation

11.09.2018

Hover effect for search bar in HTML & CSS.

Made with: HTML,CSS

View Code

Expandable Search Bar Animation

Pure Css Expanding Search

10.08.2018

Pure CSS expanding search with custom properties.

Made with: HTML,CSS (SCSS)

View Code

Pure Css Expanding Search

Search Bar

9.08.2018

Animated search bar.

Made with: HTML,CSS (SCSS)

View Code

Search Bar

Search Box

7.07.2018

Nice search box. Click on search icon, then type your keyword.

Made with: HTML,CSS

View Code

Search Box

Animated Search Input

23.05.2018

Animated (focus/transition only) search input that looks like a icon.

Made with: HTML (Pug),CSS (Sass)

View Code

Animated Search Input