A collection of real-life code snippets written in CSS and JavaScript for every web development project. Each folder contains the stylesheet and script file (if required).
This repository is divided into mentioned categories. You may navigate accordingly to find cool web components to add to your project!
- Buttons
- Loaders
- Form Fields
- Carousels
- Hover Effects
- Miscellaneous
Buttons help to lead the user to a specific action on a web page. I've got cool animated buttons for different actions for you. Pick the right one for your project!
- Delete Button
- Download Button
- Floating Action Button
- Search Button
- Send Button
- Share Button
- Subscribe Button
- Ripple Button
A Flip Delete Button to show the confirm box before deleting! Uses JS to handle the click events.
📎 View code here.
A Download Button animated to show download progress! Uses JS to handle the click event.
📎 View code here.
A Floating Action Button made with "checkbox" input tag to show options when clicked.
📎 View code here.
A Search Button slide in animation for navigation bars! Uses JS to handle the click event.
📎 View code here.
A Send Button with paper plane flying animation to show "sent" state! Uses JS to handle the click event. Fontawesome is used for the icon.
📎 View code here.
A Share Button showing all social icons when hovered over! Fontawesome is used for the icons.
📎 View code here.
A Subscribe Button animation to take in a user's email and get them subscribed to your work! Uses JS for click events.
📎 View code here.
A Ripple Button Click Effect which uses JS to generate ripples and CSS for the animation!
📎 View code here.
Loaders, an important gap-filler for an api call, also garners the most creative attention from developers. I've got sleek animated loaders for you. Pick the right one for your project!
A Cube Loader rotating animation made with 3D CSS transform properties!
📎 View code here.
An Hourglass Loader with sand filling animation made using pseudo elements in CSS!
📎 View code here.
A Text Loader which uses CSS background gradient and clip properties!
📎 View code here.
A Whirlpool Loader which uses CSS border properties and pseudo elements, each with a different animation speed and delay to give a whirlpool effect!
📎 View code here.
A list of various form fields including password validation, feedback fields, label animation and more to help you design beautiful eye-catching forms for your projects!
- Multiselect Dropdown
- Password Validation
- Star Rating Field
- Feedback Field
- Label Animation
- Toggle Password Field
A Multiselect Dropdown to allow user to select more than one option in a form. Uses JS to handle all functionality and CSS transform properties from animation!
📎 View code here.
A Password Validation Field to handle some constraints on the password! This was built mostly to practice different JS concepts but you may use it in a project also.
📎 View code here.
A Star Rating Field to get user rating! Uses clip-path to draw the stars and JS for the functionality.
📎 View code here.
A Feedback Field to get user feeback! Uses CSS to draw the emojis and JS for the functionality.
📎 View code here.
An Input Label Animation for textboxes in forms which uses CSS pseudo classes and position properties!
📎 View code here.
A Toggle Password Field to show/hide password! Uses fontawesome for icons and JS to handle click events.
📎 View code here.
Carousels are a great way to provide visually appealing multiple pieces of content on a webpage all the while using space effectively. They make it easier to incorporate animation and various features without cluttering the layout.
I've got a collection of animated carousels for you!
A Split Screen Carousel with half-slide-up and half-slide-down animation made using CSS pseudo elements and JS to handle click events!
📎 View code here.
Here is a collection of some random web components that may be used to practice CSS and JS concepts or even be included in projects to enhance its UI.
A To-do List Check Item animation made with the help of "checkbox" input tag!
📎 View code here.
A Side Navigation Bar to navigate through different sections on a web page using anchor tags and scroll event!
📎 View code here.
Clipping videos inside text using CSS mix-blend properties and looping through them using JS!
📎 View code here.
Pagination Animation made using CSS grid and transform properties. JS is used to handle click events!
📎 View code here.