Neon Search Input
Inputs · @LeonKohli
- No JS
- Reduced-motion ready
Search Pulsing Input
A pure-CSS input with pulse and SVG effects. Created by boryanakrasteva on Uiverse.io.
- No JS
- Reduced-motion ready
- Customisable
- 909 B gzip
Created by @boryanakrasteva on Uiverse.io · MIT License · View original →
What PasteMotion changed
- Customisable properties (--speed) lifted by PasteMotion; original values kept as fallbacks.
- Reduced-motion fallback added by PasteMotion.
Code
<!-- "Search Pulsing Input" by boryanakrasteva on Uiverse.io · MIT License · https://uiverse.io/boryanakrasteva/hard-pig-16 -->
<div class="input-container">
<input type="text" name="text" class="input" placeholder="search...">
<span class="icon">
<svg width="19px" height="19px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path opacity="1" d="M14 5H20" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path opacity="1" d="M14 8H17" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path> <path opacity="1" d="M22 22L20 20" stroke="#000" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
</span>
</div>
How to use it
- Paste the HTML where the animation should appear.
- Add the CSS to your stylesheet. PasteMotion has already scoped any global rules to the element.
- Adjust the custom properties (--speed) on .input-container to restyle it without touching the rest.
- Reduced-motion users are covered: the animation calms down or stops when that setting is on.
Related animations
Flashy Gradient Input
Inputs · @mRcOol7
- No JS
- Reduced-motion ready
Gradient Search Input
Inputs · @Spacious74
- No JS
- Reduced-motion ready
Gradient Glowing Input
Inputs · @Mythsoul
- No JS
- Reduced-motion ready
Blue Pink Input
Inputs · @Cobp
- No JS
- Reduced-motion ready
Spotify Music Form
Inputs · @ahmed150up
- GPU-friendly
- No JS
- Reduced-motion ready