Title:
Liquid button
Created on:
May 23, 2017
Made with:
HTML, CSS, jQuery
Responsive:
No
Dependencies:
jQuery
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A beautiful two color liquid gradient round button 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:
Arrow button hover effect
Created on:
January 18, 2020
Made with:
HTML, SCSS
Responsive:
No
Dependencies:
Saas
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A stylish sophisticated learn more CSS round button 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:
Round button animated
Created on:
February 22, 2017
Made with:
HTML, CSS, Javascript
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A stylish circluar gradient round button 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
Compatible 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:
Share button
Created on:
July 11, 2018
Made with:
HTML, CSS, jQuery
Responsive:
No
Dependencies:
jQuery
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A delightful and stylish share button 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:
Order confirm animation
Created on:
September 09, 2019
Made with:
HTML(Pug), SCSS, JS(Babel)
Responsive:
No
Dependencies:
jQuery
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A creative and attractive order place confirm button 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:
Gradient button hover
Created on:
August 07, 2017
Made with:
HTML, CSS
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A set of eleven beautiful multi-color gradient round buttons created using pure HTML and CSS. Each button has a smooth hover transition along with shadows that look awesome.
Title:
Conffeti Button
Created on:
March 24, 2020
Made with:
HTML, CSS, JavaScript
Responsive:
No
Dependencies:
nan
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
Beautiful CSS submit button designed in a minimal manner. Triggers an outstanding confetti effect upon click.
Title:
Pay button
Created on:
October 31, 2021
Made with:
HTML(Pug), SCSS, JS
Responsive:
No
Dependencies:
Saas
Compatible 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:
Bubbly Button
Created on:
October 30, 2021
Made with:
HTML, SCSS, Javascript
Responsive:
No
Dependencies:
Saas
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
An attractive animated bubbly round 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:
Skeuomorphic buttons
Created on:
November 22, 2019
Made with:
HTML(Pug), SCSS
Responsive:
No
Dependencies:
Saas
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A set of minimalist yet 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:
Peach beach button
Created on:
March 12, 2019
Made with:
HTML, SCSS
Responsive:
No
Dependencies:
Saas
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A simple yet elegantly animated CSS round button. It has a light green gradient background which on hover transitions to a yellow gradient before converting into an orange gradient all in one smooth animation.
Title:
Button Hover Effects
Created on:
October 11, 2019
Made with:
HTML, CSS, JQuery
Responsive:
No
Dependencies:
JQuery
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A beautiful set of CSS buttons that provide a smooth text rotation animation upon hover. The 3 buttons represent the three possible variations of the animation.
Title:
Paw clap button
Created on:
October 30, 2021
Made with:
HTML, SCSS, Javascript
Responsive:
No
Dependencies:
Saas
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A unique Paw clap-like button 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:
Cool button effect
Created on:
May 10, 2020
Made with:
HTML, CSS, JS
Responsive:
Yes
Dependencies:
Saas
Compatible 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:
Order button animation
Created on:
October 30, 2021
Made with:
HTML, SCSS, Javascript
Responsive:
No
Dependencies:
Saas
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A creatively animated order button 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:
Animated CTA buttons
Created on:
March 23, 2019
Made with:
HTML(Pug), SCSS
Responsive:
No
Dependencies:
Saas
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
An elegant array of wonderfully animated rounded buttons 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:
Coin flip donate button
Created on:
October 30, 2021
Made with:
HTML, CSS, Javascript
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
An amazing coin flip donate button 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:
Face Button
Created on:
May 17, 2019
Made with:
HTML, CSS(SCSS), Jquery
Responsive:
No
Dependencies:
Jquery
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A cool CSS round button created in the form of a face shape. Hovering over the button triggers an animation that changes the expression of the face which follows the cursor upon.
Title:
Download button
Created on:
December 28, 2017
Made with:
HTML, CSS, jQuery
Responsive:
No
Dependencies:
jQuery
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
An attractive yet playful springy download button with amazing animations 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:
Old crt button
Created on:
July 09, 2014
Made with:
HTML, SCSS
Responsive:
No
Dependencies:
Saas
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A delightful and antique gradient button with green and yellow shades created using HTML and CSS. When you hover over the button, it will give an amazing old-style cathode ray tube animation.
Title:
Confirm confetti button
Created on:
October 31, 2021
Made with:
HTML, SCSS, Javascript
Responsive:
No
Dependencies:
Saas
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A beautiful animated confirm confetti button 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:
Toggle switch with checkbox:checked
Created on:
August 10, 2012
Made with:
HTML, CSS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A unique round button created with HTML and CSS. The button is designed to represent a round, black-colored, analog On/Off switch that turns on and off with animation on click.
Title:
Colorful gradient flex button
Created on:
September 21, 2018
Made with:
HTML, SCSS
Responsive:
Yes
Dependencies:
Saas
Compatible 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:
Favorite button
Created on:
October 31, 2021
Made with:
HTML, SCSS, Javascript
Responsive:
No
Dependencies:
Saas
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A delightfully decorous animated favorite button 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:
Hover animation
Created on:
October 04, 2013
Made with:
HTML, SCSS
Responsive:
No
Dependencies:
Saas
Compatible 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:
Squishy Toggle Button
Created on:
February 08, 2013
Made with:
HTML, CSS(Saas), JavaScript(CoffeScript)
Responsive:
No
Dependencies:
JavaScript(CoffeeScript)
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A set of CSS toggle buttons, created with HTML, CSS(Saas), and javascript(CoffeeScript). The toggle buttons provide a real-life squish effect upon click.
Title:
Atom button
Created on:
May 18, 2017
Made with:
HTML, CSS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
An animated atom round button 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
Compatible 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:
Paper plane button
Created on:
October 30, 2021
Made with:
HTML, CSS, Javascript
Responsive:
No
Dependencies:
Saas
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
An awesome innovative button 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:
Download button animation
Created on:
October 30, 2021
Made with:
HTML, CSS, Javascript
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
An elegant formal download CSS round button with a unique download animation 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:
Bouncy button
Created on:
May 24, 2014
Made with:
HTML, SCSS, jQuery
Responsive:
No
Dependencies:
jQuery
Compatible 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:
Cool button
Created on:
October 30, 2021
Made with:
HTML, SCSS
Responsive:
No
Dependencies:
Saas
Compatible 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:
Button hold to confirm
Created on:
December 02, 2019
Made with:
HTML, SCSS, Javascript
Responsive:
No
Dependencies:
Saas
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A sophisticated publish button 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:
Gradient button shadows
Created on:
April 05, 2017
Made with:
HTML, CSS(Less)
Responsive:
No
Dependencies:
nan
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A simple yet beautiful round buttons with different gradient backgrounds created with HTML and Less. Their borders and background shadows also look great with a design that catches user attention.
Title:
Minimal Circular 3D Buttons:
Created on:
June 13, 2012
Made with:
HTML, CSS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
Minimal yet beautifully designed buttons, created with HTML and CSS. Provides an icon placeholder in the center and triggers a hover and push animation on click.
Title:
Gradient button with subtle animations
Created on:
September 06, 2017
Made with:
HTML, SCSS
Responsive:
No
Dependencies:
Saas
Compatible 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.
Title:
Colorful Flower Popup Menu
Created on:
April 12, 2016
Made with:
HTML, CSS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A CSS round button, that can also be used in the form of a navbar. Upon click, it triggers the pop-up of various other buttons in a circular motion.
Title:
Play and pause button
Created on:
December 05, 2019
Made with:
HTML, SCSS, Javascript
Responsive:
No
Dependencies:
Saas
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
An elegant formal pause & play button 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:
Animated gradient button
Created on:
May 20, 2018
Made with:
HTML(Pug), CSS(Stylus)
Responsive:
No
Dependencies:
nan
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
An attractive gradient button with infinite animation and beautiful shadow effect 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:
Animated download button
Created on:
November 18, 2020
Made with:
HTML, SCSS, Javascript
Responsive:
No
Dependencies:
Saas
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A beautifully animated download all button 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:
Button with loading indicator
Created on:
October 31, 2021
Made with:
HTML(Pug), SCSS, JS(Babel)
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
An elegant simple rounded Go button 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:
Bookmark button
Created on:
October 31, 2021
Made with:
HTML, SCSS, Javascript
Responsive:
No
Dependencies:
Saas
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
Elegant and delightful bookmark round buttons 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:
Glowing round button
Created on:
January 31, 2019
Made with:
HTMl, CSS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A beautiful attractive glowing button with gradient on borders created using pure HTML and CSS. This button is capsule-shape and borders are thick, giving a glowing effect on hover.
Title:
3D flip button
Created on:
October 30, 2021
Made with:
HTML, CSS, Javascript
Responsive:
Yes
Dependencies:
nan
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
An amazing 3D flip button 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:
Gradient hover animated button
Created on:
January 28, 2016
Made with:
HTML, CSS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A ghost animated button which transitions border on hover 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:
Round
Created on:
January 17, 2013
Made with:
HTML, SCSS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
Circle buttons created with HTML and SCSS. Designed with a 3D-style border. Triggers color changing and rotating animations upon hover.
Title:
Animated Buttons II:Circular Buttons
Created on:
July 08, 2015
Made with:
HTML, SCSS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Chrome, Brave, Firefox, Opera, Edge
Code description:
A set of round buttons created with HTML and CSS. One of the button triggers a margin rotating animation and the ther one does a zoom-in animation upon hover.
Title:
Animation submit button
Created on:
October 08, 2015
Made with:
HTML, CSS, jQuery
Responsive:
Yes
Dependencies:
Saas
Compatible 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:
Pure CSS animated button
Created on:
February 25, 2018
Made with:
HTML, SCSS
Responsive:
No
Dependencies:
Saas
Compatible 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.
