A long list of pure CSS effects that can be used on buttons, text or any hoverable element. The CSS effects are pre-compiled through Sass, showcase...

A long list of pure CSS effects that can be used on buttons, text or any hoverable element. The CSS effects are pre-compiled through Sass, showcased with buttons structured in HTML via PUG. Created by CodePen user strafeOK

An on-hover effect showcased over a set of buttons on a column arrangement. The effect is revealed with a circular shape that expands itself in a l...

An on-hover effect showcased over a set of buttons on a column arrangement. The effect is revealed with a circular shape that expands itself in a linear motion, taking over the whole button background while on-hover. Created by CodePen user Sammy Helali.

A small collection created in CSS by Codepen user John Heiner, it features 8 animated button styles with stunningly beautiful animations like Lift ...

A small collection created in CSS by Codepen user John Heiner, it features 8 animated button styles with stunningly beautiful animations like Lift Off, Hologram, Diagonal Swipe, and more!

Fun snippet uploaded by Codepen user Giana. Basic animations with box shadows. No extra elements or pseudo-elements required.

Fun snippet uploaded by Codepen user Giana. Basic animations with box shadows. No extra elements or pseudo-elements required.

Handy set of Pressable 3D styled Buttons in pure CSS

Handy set of Pressable 3D styled Buttons in pure CSS

A cool toggle button that you can add to a website or a mobile app. It uses both CSS and jQuery to achieve this purpose, and the code is really lig...

A cool toggle button that you can add to a website or a mobile app. It uses both CSS and jQuery to achieve this purpose, and the code is really lightweight, making it easy to add to the site.

A cool button effect made in pure CSS resembling an atom when hovered over. The button can be implemented easily, using just a few lines of CSS. Ad...

A cool button effect made in pure CSS resembling an atom when hovered over. The button can be implemented easily, using just a few lines of CSS. Add a simple link to the div and you have a functional button for your site or app.

A button made in CSS that activates a simple menu on click. It can be used as a menu in a mobile app or a website, it's lightweight and easy to imp...

A button made in CSS that activates a simple menu on click. It can be used as a menu in a mobile app or a website, it's lightweight and easy to implement.

An SVG goo animation made in CSS and JavaScript. It consists of a simple button that leaks when clicked. It can be used as part of a website or a m...

An SVG goo animation made in CSS and JavaScript. It consists of a simple button that leaks when clicked. It can be used as part of a website or a mobile app, in a game.

A web tool that shows several buttons in different styles and shapes. You just have to select the color and the predefined sizes, and after that, y...

A web tool that shows several buttons in different styles and shapes. You just have to select the color and the predefined sizes, and after that, you can copy the code and use it anywhere.

A simple delete button made in CSS and JavaScript. The animation is really fluid, and it consists of three stages, delete, confirmation and success...

A simple delete button made in CSS and JavaScript. The animation is really fluid, and it consists of three stages, delete, confirmation and success, all within the same button.

This a CSS animation effect for hovering over images. It comes with four different options for the content shown on hover. It is customizable and e...

This a CSS animation effect for hovering over images. It comes with four different options for the content shown on hover. It is customizable and easy to preview and copy to use on other sites.

A totally CSS based button featuring an smooth pressing animation when clicked. Featuring an stylish flat design, this button is an ideal choice fo...

A totally CSS based button featuring an smooth pressing animation when clicked. Featuring an stylish flat design, this button is an ideal choice for any site.

This useful snippet uses HTML alongside pure CSS to create an animated share button. The hover and click animations can be edited using the 'transf...

This useful snippet uses HTML alongside pure CSS to create an animated share button. The hover and click animations can be edited using the 'transform' parameter in CSS, as well as the heart icon and the hover text.

A code experiment with SVG icons for website navigation. It consists of buttons made with CSS and JavaScript that change color when selected. Also,...

A code experiment with SVG icons for website navigation. It consists of buttons made with CSS and JavaScript that change color when selected. Also, it has Material transitions to make it look dynamic.

A beautiful download animation placed within a flat CSS and JavaScript button. It displays an arrow and an underline that when clicked becomes a lo...

A beautiful download animation placed within a flat CSS and JavaScript button. It displays an arrow and an underline that when clicked becomes a loading bar. When loading is done, a check mark indicates success.

An interactive CSS and JavaScript snippet that shows a download button with download progress and download success effects using SVG. It was coded ...

An interactive CSS and JavaScript snippet that shows a download button with download progress and download success effects using SVG. It was coded by Chris Gannon.

A set of buttons made in pure CSS. They are flat, but the flipping effect they have makes them look like they were 3D. The code, created by Josh Sh...

A set of buttons made in pure CSS. They are flat, but the flipping effect they have makes them look like they were 3D. The code, created by Josh Shor is really simple, does not take to much space and it's easy to modify. Use this for personal and client projects.

A pure CSS multi-functional button that pops up of a single button from a checkbox. It uses event triggers, and the whole thing has a Material styl...

A pure CSS multi-functional button that pops up of a single button from a checkbox. It uses event triggers, and the whole thing has a Material style. It works in most of the newest browsers but it looks better on Chrome. This code is free to use for personal and commercial projects.

A simple button made in CSS for a menu icon. It is animated, so when you click on it will turn into a notification. It has pastel colors yet they c...

A simple button made in CSS for a menu icon. It is animated, so when you click on it will turn into a notification. It has pastel colors yet they can be modified easily. This code experiment is easy to implement and was developed by Gerta Xhepi.

A nice duo of two CSS buttons that integrates a subtle yet great looking squeeze-like animation when pressing each one of the buttons. This nice cr...

A nice duo of two CSS buttons that integrates a subtle yet great looking squeeze-like animation when pressing each one of the buttons. This nice creation was crafted in pure CSS.

A menu button featuring social connections with a smooth radial deployment effect from a hamburger icon, round social icons. Facebook, Twitter, Git...

A menu button featuring social connections with a smooth radial deployment effect from a hamburger icon, round social icons. Facebook, Twitter, GitHub and LinkedIn are among them.

This simple CSS code experiment shows a set of radio buttons in a Material style and one of them is selected. It only uses a small chunk of CSS and...

This simple CSS code experiment shows a set of radio buttons in a Material style and one of them is selected. It only uses a small chunk of CSS and HTML to deliver a nice animation. Colors and even the shape of the radio buttons can be altered to match your website's style.

A pair of buttons made in CSS, one for upvoting and the other for downvoting. When clicked, the buttons show a wave effect and change their color. ...

A pair of buttons made in CSS, one for upvoting and the other for downvoting. When clicked, the buttons show a wave effect and change their color. The code is lightweight and ready to implement. This pen was created by user Valeriya.

An amazing set of CSS buttons that have a stylish hand-drawn style featuring dotted borders and a shadow that contracts as you hover over them, giv...

An amazing set of CSS buttons that have a stylish hand-drawn style featuring dotted borders and a shadow that contracts as you hover over them, giving them a nice feel.

A very appealing CSS button for social media sharing purposes that features a smooth expand effect becoming a container with a list of sharing opti...

A very appealing CSS button for social media sharing purposes that features a smooth expand effect becoming a container with a list of sharing options.

A very appealing CSS button that serves for purposes of send or submit actions. It becomes a loading bar once you click it, and when it finishes it...

A very appealing CSS button that serves for purposes of send or submit actions. It becomes a loading bar once you click it, and when it finishes it becomes a success button.

Quite a stylish css button that features a nice animation for purposes such as download, upload, or any process-related action. It stretches into a...

Quite a stylish css button that features a nice animation for purposes such as download, upload, or any process-related action. It stretches into a loading bat shape, and shows a thick as it finishes.

A code snippet developed by Cole Waldrip that features CSS icon buttons that rotate 90 degrees clockwise and set off a bit as you hover over each o...

A code snippet developed by Cole Waldrip that features CSS icon buttons that rotate 90 degrees clockwise and set off a bit as you hover over each of them.

A cool set of CSS animations for buttons. The animations include border effects and fillings in different colors. The code used is really simple to...

A cool set of CSS animations for buttons. The animations include border effects and fillings in different colors. The code used is really simple to integrate on any website and it doesn't use any JavaScript. It was created by Chris Deacy.

A beautiful, animated button made in CSS that once you click it, it transforms into a loading bar, and then into a confirmation button. It has a ma...

A beautiful, animated button made in CSS that once you click it, it transforms into a loading bar, and then into a confirmation button. It has a material style, and doesn't require much time to integrate into your website. Created by Bhakti Al Akbar Pasaribu.

A set of animated material design buttons made in CSS, including effects when the user clicks and hovers. This buttons can be implemented easily on...

A set of animated material design buttons made in CSS, including effects when the user clicks and hovers. This buttons can be implemented easily on any website and you can modify the code at will. This snippet is free and it was made by Jon Brennecke.

A simple button animation made in CSS and JavaScript with a Material style. The first thing you'll see is a simple button with a plus sign that, wh...

A simple button animation made in CSS and JavaScript with a Material style. The first thing you'll see is a simple button with a plus sign that, when clicked, displays the modal with cool animations. This code snippet is free to use and modify, and it was created by XavaSoft.

These are a set of gorgeous social buttons made in CSS with a material design appearance. When hovered over, they show the effect, perfect for rece...

These are a set of gorgeous social buttons made in CSS with a material design appearance. When hovered over, they show the effect, perfect for recent types of websites, and the buttons included are for Facebook, Twitter, Google+, Dribbble and skype, although you can add any social network since it uses FontAwesome icons.

A code snippet made in CSS displaying three buttons with hover states and transitions. This is a lightweight creation that can be implemented in an...

A code snippet made in CSS displaying three buttons with hover states and transitions. This is a lightweight creation that can be implemented in any web or mobile app project. It was created by Galen Strasen.

A set of 5 nicely crafted different shaped SCSS buttons that lift up a bit as you hover over them. You'll find diamond, ribbon, arrow, rounded, and...

A set of 5 nicely crafted different shaped SCSS buttons that lift up a bit as you hover over them. You'll find diamond, ribbon, arrow, rounded, and sheer shapes.

A set of call-to-action buttons made in CSS styled with animations that make them look awesome. The animations run throughout the border, and they ...

A set of call-to-action buttons made in CSS styled with animations that make them look awesome. The animations run throughout the border, and they include different colors for you to chose the one you like the most. They were made by Reiha Hosseini.

A CSS snippet to create clean, classy hover effects for your icons using CSS transitions and animations. The results are quite different from each ...

A CSS snippet to create clean, classy hover effects for your icons using CSS transitions and animations. The results are quite different from each other, including highlights, slide animations in all directions, rotations, fades and much more.

A large collection of buttons coming in four principal categories: Gradient, shiny, flat-styled and 3D. Each containing multiple sizes and six diff...

A large collection of buttons coming in four principal categories: Gradient, shiny, flat-styled and 3D. Each containing multiple sizes and six different colors, providing an extremely versatile selection that's sure to fit in basically any design. All credit for this project goes to CodePen's Felipe Marcos.

A couple of buttons with a very interesting design that combines classic elements with the modern look of a digital interface. Point the mouse over...

A couple of buttons with a very interesting design that combines classic elements with the modern look of a digital interface. Point the mouse over any of the buttons and a light will activate on the top right corner. Click on the elements to see the buttons sink slightly along with the light. Coded by Bobby from CodePen.

A functional version of a Dribbble shot created by MVBen that consists of a pair of switches that graduate the lighting of the canvas where they ge...

A functional version of a Dribbble shot created by MVBen that consists of a pair of switches that graduate the lighting of the canvas where they get located. It is done mostly with CSS to portray a realistic look, and it implements the JS and HTML in an easy way.

A beautiful concept for social sharing buttons created in pure CSS. The idea is to display a colorful set of icons representing a particular networ...

A beautiful concept for social sharing buttons created in pure CSS. The idea is to display a colorful set of icons representing a particular network and then show a nice animation with a transparency effect whenever the user hovers over the design. The name of the website can also be seen in text with the hover animation.

A nice couple of social buttons for the two most common networks: Twitter and Facebook. Hover over any of the two to see a "like" or "tweet" option...

A nice couple of social buttons for the two most common networks: Twitter and Facebook. Hover over any of the two to see a "like" or "tweet" option animate from the bottom of the designs. Coded by Gonzalo Fuentes, based on an original Dribbble shot from Caleb Andrews.

A simple vertical navigation based on social networking icons, intended to help you promote other ways of communication with your users. Completely...

A simple vertical navigation based on social networking icons, intended to help you promote other ways of communication with your users. Completely styled with CSS, it allows easy customization in order to adjust it to your website's design. Coded by Marco Biedermann, inspired on a Dribbble shot from Zach Roszczewski.

A flat button that has been styled using only CSS shadows, to the point where it now has a 3D appearance. Shadow is applied on the button itself to...

A flat button that has been styled using only CSS shadows, to the point where it now has a 3D appearance. Shadow is applied on the button itself to give it dimension while the background has a more typical effect. When the button is clicked, animations provide a smooth "push" illusion.

Navigation with large pressable buttons that animate nicely by David Hellman. The CSS is pretty simple to understand, the background of the menu is...

Navigation with large pressable buttons that animate nicely by David Hellman. The CSS is pretty simple to understand, the background of the menu is just a linear-gradient and the pressed effect is created using the box-shadows on both :active and :hover states.

James Nowland brings us this awesome set of dark buttons with a blue glowing effect that marks the currently selected option. They work like radio ...

James Nowland brings us this awesome set of dark buttons with a blue glowing effect that marks the currently selected option. They work like radio buttons, allowing only one selection to be active at a time. The elements can be reduced or enlarged at will. Based on a Dribbble shot by JustD.

A set of icon fonts that also come with a tutorial for teaching you how to get the most out of icon fonts, which are an amazing way to ensure high-...

A set of icon fonts that also come with a tutorial for teaching you how to get the most out of icon fonts, which are an amazing way to ensure high-quality viewing on retina displays. Apart from using the font, the author applies a wonderful hover effect to the set.

A button is created in 3D by using the Webkit-perspective property (that only works in Webkit browsers, of course). Then, it uses the transition pr...

A button is created in 3D by using the Webkit-perspective property (that only works in Webkit browsers, of course). Then, it uses the transition property to trigger the transform animation when the button is hovered, which reveals the number of fans (that can be replaced by any other piece of information).

A fantastic bar intended to provide links for social networks through elegant hovering mechanics. When moving the cursor over it, the button opens ...

A fantastic bar intended to provide links for social networks through elegant hovering mechanics. When moving the cursor over it, the button opens up, revealing links to four different social services. It makes use of a few CSS properties such as box shadows, transitions and transforms.

A cool project that allows you to add iOS-like tags onto your designs. It is possible to get next and previous buttons, too thanks to a very simple...

A cool project that allows you to add iOS-like tags onto your designs. It is possible to get next and previous buttons, too thanks to a very simple line of code. The items adjust automatically to the length of the text you include in them, squeezing and expanding accordingly.

A stylish set of pressable 3D buttons featuring different looks for each state (inactive, hover and click). Click on the buttons to see them squeez...

A stylish set of pressable 3D buttons featuring different looks for each state (inactive, hover and click). Click on the buttons to see them squeeze down to their base and hover to get a subtle shadow effect. They come in eight different colors, ensuring you can find the right one for your web project.

Link your visitors to your social networking profiles with this appealing set of buttons for six different websites including Facebook, Twitter, Dr...

Link your visitors to your social networking profiles with this appealing set of buttons for six different websites including Facebook, Twitter, Dribbble and more. They are styled with pure CSS and feature a simple but effect click animation. Uploaded to CSSDeck by Rishabh.

A fantastic set of twelve different flip cards, each linking the user to a different social network (including  Twitter, Facebook, Google+, Dribbbl...

A fantastic set of twelve different flip cards, each linking the user to a different social network (including  Twitter, Facebook, Google+, Dribbble and many more). They are visually very appealing, featuring smooth hover animations that reveal the full-color versions of the icons. Uploaded to CodePen by Charlotte Dann.

A beautiful user interface concept including amazing buttons with well-designed states. It is also possible to add text boxes into the mix. The act...

A beautiful user interface concept including amazing buttons with well-designed states. It is also possible to add text boxes into the mix. The active state of the buttons (which can have toggle functionality) is very attractive, featuring a neon-like effect. Uploaded to CodePen by Lopez Hugo.