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

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 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.

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 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.

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.

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 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.

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 Shor is really simple, does not take to much space and it’s easy to modify. Use this for personal and client projects.

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.

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.

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 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 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.

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 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, 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 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 for any site.

A glowy button made in pure CSS and SVG filtering, it loads fast and can be used to decorate a specific area to provide focus to it. It also uses keyframes, and it’s lightweight, making it easy to implement. You can change it’s style and shape easily.

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 cool circle framed profile button/badge developed in pure CSS that features a nice animation as you hover over it, it shrinks radially making it look like an aiming target.

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 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.

Handy set of Pressable 3D styled Buttons in pure CSS

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.

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 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 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.

An appealing and useful expandable button that becomes a search bar as you hover on it staying fixed on its right side and expanding leftwards.

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 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 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 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 wonderfully animated set of colorful buttons, styled with CSS. The result here is incredibly attractive, given the smoothness of the movement performed by the buttons when clicking them, projecting an illusion of real softness. The design is wrapped up by equally smooth shadow effects.

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 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 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 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 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.

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 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 nice set of animated social buttons for four different social alternatives: Facebook, Twitter, Google+ and RSS Feeds. Initially, they come in a dark gray appearance, but when hovering over the icons, a slide moves down, revealing the logos in full color. It was uploaded to CSSDeck by Emilios M.

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 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 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.

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.

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 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.

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 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.

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 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 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.