Collection of free HTML button with vanilla JavaScript code examples: animated, multiple, confirm, delete, download/upload, submit and with hover/click/hold effects
Welcome to our collection of JavaScript examples! In this meticulously curated compilation, we have assembled a diverse range of JavaScript code snippets that showcase the flexibility and power of this dynamic programming language.
Coin Flip Donate Button
Cooper Goeke | October 28, 2020
HTML / CSS (SCSS) / JS
About a code
A simple idea that ended up being really hard to pull off. No 3D elements or transformations are used in this experiment, only 2D elements and some clever math to give the illusion of a 3D coin with real thickness. The coin flipping is actually randomized too - if you press the button a few times you'll see.
Chrome, Edge, Firefox, Opera, Safari
yes
-
Unsubscribe Buttons
Cooper Goeke | September 28, 2020
HTML / CSS (SCSS) / JS
About a code
Some ridiculous unsubscribe buttons designed to make the user feel bad for unsubscribing - not seriously though. This project leans heavily on SVG's and CSS animations and no external libraries are used.
Chrome, Edge, Firefox, Opera, Safari
yes
-
Don't Let The Door Hit You On The Way Out
Cooper Goeke | September 21, 2020
HTML / CSS (SCSS) / JS
About a code
This pen features some heavy use of CSS variables and transitions on SVG elements. Animating all the figure's limbs is tedious work but it pays off when you see the finished product.
Chrome, Edge, Firefox, Opera, Safari
yes
-
Upload Progress Animation Microinteraction with GSAP
Takane Ichinose | July 20, 2020
HTML / CSS / JS
About a code
On the first click, the shape of the button will become circle. Then, the button will become a progress bar, and a "speech bubble" above the progress bar will be shown. That "speech bubble" shows the percentage of the upload progress. The "speech bubble" will tilt when the progress starts. After the uploading is done, the button will turn into green colored circle, then the check mark will appear, pertaining that the upload is already done. After 5 seconds, the button will return into its normal state.
Chrome, Edge, Firefox, Opera, Safari
yes
gsap.js
Morphing Icon Download Button
Jon Kantner | June 9, 2020
HTML / CSS / JS
About a code
A download animation where the arrow and tray merge into a progress bar that will soon become a checkmark.
Chrome, Edge, Firefox, Opera, Safari
yes
-
Discover Our Extensive Snippet Library
This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.
HTML Snippets.
Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.
CSS Snippets.
Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations
JavaScript Snippets.
Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms
Bootstrap Snippets.
Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components
Tailwind Snippets.
Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to
jQuery Snippets.
Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations
Let's craft a visual identity that ignites passion and loyalty. ✨