Title:
Liquid button
Created on:
May 23, 2017
Made with:
HTML, CSS, jQuery
Responsive:
No
Dependencies:
jQuery
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A beautiful, gradient background in two colors liquid button is created using HTML, CSS, and JQuery. When you hover over the button, it will animated the button background to look like the liquid effect based on the movement of mouse.
Title:
Paper plane button
Created on:
October 30, 2021
Made with:
HTML, CSS, Javascript
Responsive:
No
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
An awesome, innovative button is created using HTML, SCSS, and pure Javascript. When you click on the button, it will fold the button like a paper into the plane with a very nice animation. It also show the animation like flying the plane away and the text send on the button is replaced with the sent.
Title:
Hover animation
Created on:
October 04, 2013
Made with:
HTML, SCSS
Responsive:
No
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A beautiful round buttons in white are created using HTML and SCSS. When you hover over the button, it fills in the color from outside to inside giving a very smooth animation effect. Also, the icon color changes to white.
Title:
Atom button
Created on:
May 18, 2017
Made with:
HTML, CSS
Responsive:
No
Dependencies:
nan
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
An animated, atom Button is created using pure HTML and CSS. It shows innovative and creative idea over the button. When you hover over the button, it will display a shining atom on the border of the button with circular animations.
Title:
Dynamic form
Created on:
January 16, 2017
Made with:
HTML(Pug), SCSS, JS
Responsive:
Yes
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A dynamic form created using HTML, SCSS and JS. It is a questionnaire created using the buttons. Javascript decides the flow on the basis of the answers.
Title:
Coin flip donate button
Created on:
October 30, 2021
Made with:
HTML, CSS, Javascript
Responsive:
Yes
Dependencies:
nan
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
An amazing coin flip donate button is created using HTML, SCSS, and pure Javascript. Only 2D elements and some clever math is used to give the illusion of a 3D coin with real thickness. When you click on the button, it will toss the coin in the button and will show a “Thank you” message at an end.
Title:
Animation submit button
Created on:
October 08, 2015
Made with:
HTML, CSS, jQuery
Responsive:
Yes
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A delightful, modern submit button created using HTML, SCSS, and JQuery. When you hover over the button, it will fill the background of the button with a pleasant sea green color in a fade-in effect. It will also change the text color to white. When you click on the button, it will show a circular loading effect with smooth animation and a right icon at an end.
Title:
3D flip button
Created on:
October 30, 2021
Made with:
HTML, CSS, Javascript
Responsive:
Yes
Dependencies:
nan
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
An amazing, 3D flip button is created using HTML, CSS, and pure Javascript. When you click on the button, it will flip the button on the backside with 3d animations that also show loading images with the gray background and then again flip back to normal position.
Title:
Download button animation
Created on:
October 30, 2021
Made with:
HTML, CSS, Javascript
Responsive:
Yes
Dependencies:
nan
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
An elegant, formal download button in the gray shade is created using HTML(Pug), SCSS, and JQuery. When you click on the button, it will show a percentage from 0% to 100% with nice animation and gives an amazing look to feel the real download process along with the progress bar.
Title:
Rounded CSS buttons
Created on:
October 30, 2021
Made with:
HTML(Pug), SCSS
Responsive:
No
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A beautiful, colorful rounded buttons with smooth animation effects are created using HTML(Pug) and SCSS. When you hover over the button, all the button has different animated effects to show a decent look to the web page.
Title:
CSS3 3D filp button
Created on:
October 30, 2021
Made with:
HTML, SCSS
Responsive:
No
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A delightful, stylish 3D flip button is created using HTML and SCSS. It is not using any icon or image fonts. When you click on the button, it will flip the button and show a “Thank you” message with smooth 3d animation effects.
Title:
Animated gradient button
Created on:
May 20, 2018
Made with:
HTML(Pug), CSS(Stylus)
Responsive:
No
Dependencies:
nan
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
An attractive gradient button with infinite animation and beautiful shadow effect is created using Pug and Stylus for markup. Animations are shown with key frames in CSS. The button constantly changes the background with the beautiful multi color.
Title:
Gradient button hover
Created on:
August 07, 2017
Made with:
HTML, CSS
Responsive:
Yes
Dependencies:
nan
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A multi color, rounded corner eleven gradient buttons are created with different color pallets using pure HTML and CSS. Each button has a shadow that looks awesome.
Title:
Glowing gradient button
Created on:
May 31, 2021
Made with:
HTML, CSS
Responsive:
No
Dependencies:
nan
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
An attractive, gradient button with a black background gives an amazing look to the web page. It is created in pure HTML and CSS. When you hover over the button, it will create an amazing glowing and shining effect over the button.
Title:
Pure CSS animated button
Created on:
February 25, 2018
Made with:
HTML, SCSS
Responsive:
No
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A simple, beautiful round button created using HTML and CSS. When you hover over the button, it will change the background of a button to gray with a blowing animation.
Title:
Round button animated
Created on:
February 22, 2017
Made with:
HTML, CSS, Javascript
Responsive:
Yes
Dependencies:
nan
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A stylish, decorous two colored rounded buttons is created using HTML, CSS and Javascript. It is an animated button that glows continuously from inside to out. When you hover over the button, it will stop blinking. When you click on the button, it will change the state and toggles the color after every click.n n
Title:
Button shadow
Created on:
May 20, 2020
Made with:
HTML, CSS
Responsive:
No
Dependencies:
nan
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A simple, clean submit button created using pure HTML and CSS. When you hover over the button, it will change the color to the pleasant green shade and will slightly pop-up along with the shadow effects that makes the button shiny.
Title:
Bubbly Button
Created on:
October 30, 2021
Made with:
HTML, SCSS, Javascript
Responsive:
No
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
An attractive, animated bubbly button created using HTML, SCSS, and Javascript. It has a shadow effect in light pink color to give it an awesome look. When you click on the button, it will pop-up bubbles from the border of the button with nice fade-in effects.
Title:
Arrow button hover effect
Created on:
January 18, 2020
Made with:
HTML, SCSS
Responsive:
No
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A stylish, sophisticated learn more button is created using HTML and SCSS. When you hover over the button, it will slide and fill the background to dark from left to right. It also toggles the arrow icons with smooth animation.
Title:
Animated CTA buttons
Created on:
March 23, 2019
Made with:
HTML(Pug), SCSS
Responsive:
No
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
An elegant, wonderful animated rounded buttons are created using HTML and SCSS. Each button in the block has a different effects on hover. All this buttons attracts the user giving a very nice look to the web page.
Title:
Saas button border
Created on:
October 30, 2021
Made with:
HTML, SCSS
Responsive:
No
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
An simple and sophisticated rounded button with border is created using HTML and SCSS. When you hover over the button, it will change the border color and text color starting from bottom-right corner to top-left corner with a nice smooth animation effect. When you click on the button, it draws a gear to the button border to give a decent look.
Title:
Cool button
Created on:
October 30, 2021
Made with:
HTML, SCSS
Responsive:
No
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A simple, shiny rounded buttons are created using HTML and SCSS. When you hover over the button, it will highlight border color and also show a nice windy effect with quick animation. It is also having a text animation effects.
Title:
Share button
Created on:
July 11, 2018
Made with:
HTML, CSS, jQuery
Responsive:
No
Dependencies:
jQuery
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A delightful and stylish share button is created using HTML, CSS, and JQuery. When you click on the button, it will show you four social media icons to share your content. When you click on the particular icon, it will show a “Thank you” message with nice animation effects.
Title:
Download button
Created on:
December 28, 2017
Made with:
HTML, CSS, jQuery
Responsive:
No
Dependencies:
jQuery
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
An attractive, playful springy download button with amazing animations is created using HTML, SCSS, and JQuery. When you click on the button, it will expand the button and show ball animation. Thereafter, it will change the button into blue color with smooth animation effects.
Title:
Button with loading indicator
Created on:
October 31, 2021
Made with:
HTML(Pug), SCSS, JS(Babel)
Responsive:
Yes
Dependencies:
nan
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
An elegant, simple rounded Go button is created using HTML, SCSS, and JQuery. When you click on the button, it will show loading animation followed by a success button with a nice animation. It is useful when you are fetching some data from an API.
Title:
Order confirm animation
Created on:
September 09, 2019
Made with:
HTML(Pug), SCSS, JS(Babel)
Responsive:
No
Dependencies:
jQuery
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A creative, attractive order place confirm button is created using HTML, SCSS, and JQuery. When you click on the button, it will show a small truck in the button which it is delivering the item and truck moving on the road. Thereafter, it will show an “order-confirm” message.
Title:
Paw clap button
Created on:
October 30, 2021
Made with:
HTML, SCSS, Javascript
Responsive:
No
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A creative idea for a Paw clap-like button is created using HTML, SCSS, and Javascript. When you hover over the button, it will show pow with a smooth animation. When you click on it, it will animate clap with another pow and increase the like count.
Title:
Organic button
Created on:
October 27, 2016
Made with:
HTML, SCSS, Javascript
Responsive:
nan
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
An elegant, elastic rounded button has pounding hearth for loading animation is created using HTML, SCSS, and Javascript. When you click on the button, it will show loading animation with a circle and convert a message from “send” to “ready” with smooth animation.
Title:
Order button animation
Created on:
October 30, 2021
Made with:
HTML, SCSS, Javascript
Responsive:
No
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A creative and attractive animated order button is created using HTML, SCSS, and Javascript. When you click on the button, it will flip the button with 3d animation and show truck animation that delivers the package. Thereafter, it will show an “order-placed” message with nice icon animation.
Title:
Pay button
Created on:
October 31, 2021
Made with:
HTML(Pug), SCSS, JS
Responsive:
No
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
An elegant, sophisticated pay button created on a black background using HTML, SCSS, and Javascript. When you click on the button, it will bring the currency note at the center of the button with amazing animation. Thereafter, it will show a “Done” message.
Title:
Favorite button
Created on:
October 31, 2021
Made with:
HTML, SCSS, Javascript
Responsive:
No
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A delightful, decorous animated favorite button is created using HTML, SCSS, and Javascript. When you click on the button, it will change the color of star to yellow with nice jumping effects. It will also toggle the state of the star when you click back again.
Title:
Explore menu burger
Created on:
December 02, 2020
Made with:
HTML, SCSS, Javascript
Responsive:
No
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A simple, beautiful 3D explore burger button created using HTML, SCSS, and Javascript. When you hover over the button, button expands to look like a 3d burger. When you move the mouse over the button, it will change the 3D direction.
Title:
Button hold to confirm
Created on:
December 02, 2019
Made with:
HTML, SCSS, Javascript
Responsive:
No
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A sophisticated, decent publish button is created using HTML, SCSS, and Javascript. When you hold on the button after a click, it will fill the loading bar. Once it is done, it will show the done icon with a smooth fade-in effect.
Title:
Play and pause button
Created on:
December 05, 2019
Made with:
HTML, SCSS, Javascript
Responsive:
No
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
An elegant, formal pause & play button is created using HTML, SCSS, and Javascript. When you click on the button, it will toggle the state of the button and also show both icons with a nice animation effect.
Title:
Bookmark button
Created on:
October 31, 2021
Made with:
HTML, SCSS, Javascript
Responsive:
No
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
An elegant, delightful bookmark button in two colors are created using HTML, SCSS, and Javascript. When you click on the button, it will change the bookmark icon to red in order to show that the item is bookmarked. You can also toggle the state by clicking on it again.
Title:
Animated download button
Created on:
November 18, 2020
Made with:
HTML, SCSS, Javascript
Responsive:
No
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A beautiful download all button is created using HTML, SCSS, and Javascript. When you click on the button, it will flip the button and show the truck animation that downloads the package. Thereafter, it will show a message that Download started.
Title:
Confirm confetti button
Created on:
October 31, 2021
Made with:
HTML, SCSS, Javascript
Responsive:
No
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A beautiful, animated confirm confetti button is created using HTML, SCSS, and Javascript. When you click on the button, it will animate the celebrated icon with realistic effects that look amazing. It is useful in many websites which need confirmation from the user.
Title:
Peach beach button
Created on:
March 12, 2019
Made with:
HTML, SCSS
Responsive:
No
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A simple button with light green and yellow gradient shades on hover converts into orange with yellow shades. A background shadow is also matching with the actual background.
Title:
Flat rounded button
Created on:
January 04, 2019
Made with:
HTML, CSS
Responsive:
No
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A simple, flat buttons with smooth hover effects are created using HTML and SCSS. It will look nice and clean on the light color scheme website. When you hover over the button, it will change the button color with smooth animation.
Title:
Skeuomorphic buttons
Created on:
November 22, 2019
Made with:
HTML(Pug), SCSS
Responsive:
No
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A decent, sophisticated rounded buttons with realistic 3d effects are created using HTML and SCSS. When you click on the button, it will animate the button smoothly that it feels like a soft touch. Box-shadow is also given for each button.
Title:
Cool button effect
Created on:
May 10, 2020
Made with:
HTML, CSS, JS
Responsive:
Yes
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A beautiful, rounded button created using HTML, CSS and JS. When you hover over the button, it will fill the button with a blue color with a liquid like effect from the starting point of your mouse pointer.
Title:
Button hover animation
Created on:
October 30, 2021
Made with:
HTML(Pug), CSS
Responsive:
No
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A beautiful, simple rounded button is created using HTML and SCSS. When you hover over the button, it will fill the background with red from left and right to the center with smooth animation and also change the text color to white with a nice fade-in effect.
Title:
Bouncy button
Created on:
May 24, 2014
Made with:
HTML, SCSS, jQuery
Responsive:
No
Dependencies:
jQuery
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A beautiful and amazing bouncy button created using HTML, SCSS, and JQuery. When you click on the button, it will expand the button a little bit, change the background color and show bounce animation on the button.
Title:
Gradient hover animated button
Created on:
January 28, 2016
Made with:
HTML, CSS
Responsive:
No
Dependencies:
nan
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A ghost animated button which transitions border on hover is created using pure HTML and CSS. When you hover over a button, it will show a very nice animation on the border of the button to give it a rich look.
Title:
Blob button with gradient
Created on:
October 14, 2021
Made with:
HTML, SCSS
Responsive:
No
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A beautiful, decent button that shows animated blobs with a transitioning text color from blue to white for visibility is created using HTML and Sass.
Title:
Colorful gradient flex button
Created on:
September 21, 2018
Made with:
HTML, SCSS
Responsive:
Yes
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A responsive, round buttons with the gradient background is using a candy color palette, HTML and Sass. When you hover over the button, it switches from 3D look to 2D look giving a rich look to the website.
Title:
Old crt button
Created on:
July 09, 2014
Made with:
HTML, SCSS
Responsive:
No
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A delightful and antique gradient button with green and yellow shades is created using HTML and CSS. When you hover over the button, it will give an amazing old-style cathode ray tube animation.
Title:
Gradient button shadows
Created on:
April 05, 2017
Made with:
HTML, CSS(Less)
Responsive:
No
Dependencies:
nan
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A beautiful, simple round buttons with different gradient backgrounds are created with HTML and Less. Border and background shadow looks great with a design that catches user attention.
Title:
Glowing round button
Created on:
January 31, 2019
Made with:
HTMl, CSS
Responsive:
No
Dependencies:
nan
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A beautiful, attractive glowing button with gradient on borders is created using pure HTML and CSS. This button is capsule-shape and borders are thick, giving a glowing effect on hover.
Title:
Gradient button with subtle animations
Created on:
September 06, 2017
Made with:
HTML, SCSS
Responsive:
No
Dependencies:
Saas
Compatable browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A beautiful two colored button with an orange and yellow gradient nicely transitions over pink and orange on hover. Transitions are also smooth.