CSS Buttons

(57 submissions) | Oct 11, 2016 (latest edition)

A massive set of multipurpose, free to download CSS buttons in multiple styles such as minimal, flat and 3D, ready to be integrated into your website.

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

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

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

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

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

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

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

  • Quite an appealing animated share button made in material design to place in bottom corners since when it is clicked it spins around to feature the different social network options to share.

  • 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 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 becomes a success button.

  • An amazing expandable CSS profile button that initially is framed as a profile photo in a circle, as you hover over it, it shows you the burger menu icon, and then you click it to expand it.

  • 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 beautiful button with colorful outlined and flat styles made entirely in CSS. This button has nice effects on hover and click, making it ready to be used in any web or mobile project. It was created by Jamie Coulter.

  • 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 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, when clicked, displays the modal with cool animations. This code snippet is free to use and modify, and it was created by XavaSoft.

  • A pretty circular icon displaying the Twitter logo over a white background. The surprise comes when moving the mouse over the element, which causes the logo to rotate, invert its colors and make the logo grow considerably larger. Uploaded to CodePen by Saurav Tomar.

  • 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 stunning and 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.

  • An animated button for Twitter made in pure CSS. It was created having in mind the material design trend and its characteristic animations. It is perfect as a standalone element, but it needs a little tweaking if you are going to integrate it with other social networks. It was created by Scott Marshall.

  • 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 collection of social sign-in buttons made in pure CSS, based on Bootstrap

  • A complete set of buttons in a minimal initial state. When hovered over and pressed, they act as realistic buttons, with shadows and such. Some buttons also have smooth gradients, which make them look professional and unique. They can be implemented easily into any design.

  • 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 fantastic set of social icons styled with a strong blue color. Their main attraction comes in the form of a smooth animation triggered on hover, which makes the circles lose their blue color, inverting the color palette on the buttons. There are five different websites to choose from.

  • A cool button shaped as a ribbon that interacts as you hover over it by expanding a bit shrinking the width of the ribbon a bit.

  • This CodePen project provides individual views for each of the instances of a smooth clickable button. Inactive, hover and click states are clearly separated with nothing but CSS3 styling, which is also used to provide a clean gray gradient background. Authored by Sara Soueidan.

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

Leave a comment

15 comments for CSS Buttons
  • Way Cool!
    Reply · | 2016-09-29T13:15:35+0000
  • nice:))
    Reply · | 2016-06-05T12:21:58+0000
  • nice!.In Expandable Profile CSS Button its showing verical content.but how can i view horizontal content once we click on that menubar.any one can help me please
    Reply · | 2016-05-21T01:03:50+0000
  • thanks :))
    Reply · | 2016-03-30T18:16:10+0000
    • No worries! Keep tuned for more cool stuff :)
      Reply · | 2016-04-19T11:29:39+0000
  • Good Work Thnks
    Reply · | 2015-04-29T06:43:28+0000
    • Much appreciated! Enjoy our whole coding sections. :)
      Reply · | 2015-04-29T09:37:00+0000
  • I really enjoyed looking through these. Very inspirational. Thanks.
    Reply · | 2015-04-26T12:24:59+0000
    • Awesome! Let us know if you decide to make something great based on this. ;)
      Reply · | 2015-04-27T09:44:12+0000
  • Good work thanks a lot frnd
    Reply · | 2015-04-22T00:39:56+0000
  • great and suprb
    Reply · | 2015-04-22T00:39:31+0000
  • Awesome!
    Reply · | 2015-04-01T15:53:55+0000
This a test message in global notification
Your download will start shortly.


Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.


Thank You!

Your post has been received, and will be reviewed by a curator