(65 submissions)

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.

  • An on-screen Apple keyboard created out of pure CSS featuring effects for a realistic looking of being pressed and springing back out.

  • 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 design UI kit in which you can find buttons, search fields, tabs, menus, login boxes and tables in different styles that you can use right now in any of your projects. The kit has been designed and hand-coded from scratch in HTML5 taking advantage of modern CSS3 techniques, including a range of common user interface elements and font stacks, which look beautiful in modern browsers and degrade gracefully in IE.

  • 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 cool online tool for generating social buttons to add to your website. They can be created step by step selecting the style, the networks you want to be featured and your website's information. After that, you can preview the code and grab it.

  • 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 beautiful button made with CSS and JavaScript that transforms into a confirmation box, with additional buttons. The cool thing about it is that it flips accordingly to the side it's been pressed. This button is flat and you can use the code in any project. It was created by Hakim El Hattab.

  • Created by Marius Balaj and uploaded to CodePen, this code snippet creates cool social media buttons with a hover slide effect applied with pure CSS. The buttons look really well and provide a more visually appealing alternative to the classic social media buttons.

  • 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 rather simple but classy button created with CSS. Click on it to trigger a nice "push" animation. Additionally, just by hovering over the element, a very slight shadow border effect appears, as well. It features the letters "FTP" inside of it, which can be replaced with anything else to signify the button's function.

  • 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 beautiful rippler effect made in CSS that consists of two actionable buttons. Once you click over one of them, a wavy effect takes place, focusing it the area you click. The idea was to create some material design-alike components for people who love this design trend. It was created by Gregor Adams.

  • A simple online generator for creating a WhatsApp button that you can then download and use on mobile apps (it only works on iOS and android). To use it you just set up the properties you want your button to have like size, button label and sharing message, then grab the button code and integrate it. This tool is free.

  • 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 beautiful button that animates with a loading bar as soon as users press it. Useful to achieve a good look and inform about the current progress.

  • A pretty trio of social buttons created with pure CSS, perfect to promote yourself through every corner of the net. These buttons animate slightly on hover, raising from their original positions a little bit in order to represent interactivity with the user. They come in different colors, depending on the website they are attached to.

  • A code snippet for a notification system created with CSS3 animations. It consists of two icons, one for notifications and the other for messages (chat). The design is really simple and attractive but what's important is the use of the animations to create an effect of wave, which works perfectly to grab the attention of the user. You can change the image and the waves will take the shape of it. Code snippet was crea...

  • Inspired by Loredonut’s Pen from Codepen (a simple unicolor menu), this is a beautiful menu with CSS animations, for the button to activate and close, as well as the actual items in the list. Elements have rounded corners, unlike the original, and the effects were made based on Todd Motto functions. Geoffrey Crofte made this development and uploaded it to Codepen.

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

  • An easily customizable set of buttons inspired by the ones seen at Kickstarter, providing different functions through their styling, such as warnings or submit notifications. Additionally, they become brighter when hovering, thanks to a neat CSS effect. Uploaded to CodePen by Charlie Hield.

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

  • A cool set of buttons to promote social sharing, carrying neat icon fonts and hover effects that allow the visitors to use their social credentials to tweet, like or +1 a piece of content. Everything is styled with the power of CSS3 by CodePen user Tim Pietrusky.

  • Maksim Surguy has developed this interesting pen in order to tackle a common issue with flat buttons. The idea is to properly indicate interaction inside the elements and provide different types of (sometimes not so) flat styling. All items are styled with CSS3.

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

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

  • One of those simple effects than can wow more than one visitor. This pair of social buttons for Twitter and Facebook look rather ordinary at first, but when hovering over them display an awesome brightness animation that leaves a truly good impression. Authored by Nicolas Gallagher.

  • A pretty couple of buttons styled completely with the power of CSS. They come in two colors: Pink and blue. Both versions feature a subtle shadow around the lower part, plus another shadow effect on the top that gives it a good deal of depth. Hover highlights and click animations complete the buttons' presentation.

  • A fantastic code snippet that provides a great way to promote your Twitter profile, attracting more followers and interactivity. The idea is to have a simple button with the Twitter logo and then make it animate whenever the visitors hover over it, revealing a button linking them to your desired profile.

  • A group of classic buttons for linking readers directly to your social networking profiles around the web. The icons are image-based, but feature a double-resolution version in order to display correctly in high-density screens. This resource is a courtesy of CSS Flow.

  • A cool set of animated buttons created by Sergio Camalich, styled with pure CSS3. They feature a number of well-applied effects, including gradients and box shadows, plus the elegant press animation, which makes you notice and appreciate the two-part design.

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

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

  • An impressive set of flat-styled buttons created with CSS (Sass). They feature vibrant colors that catch the attention, but that is not their only weapon: Borders appear on hover and a fantastic animation gets activated when clicking on the elements. An interesting project by Terence Devine.

  • A cool set of colorful buttons, useful to style and give functionality to any navigation interface. Apart from the usual text content, the buttons can also contain icons, in this case linking the users to a number of social networks. Uploaded to CSSDeck by Marco Biedermann.

  • 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 package of 20 social icons including the most common social networks (Twitter, Facebook, G+, YouTube, etc), available to download for free thanks to the people at Designers Chair. The icons show the logo for their respective website, but also show the written name when hovering over them.

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

  • Another fantastic freebie from the great team of Designers Chair bringing us 20 social icons in an uncomplicated, simplified style that will surely fit with most web page designs out there. You can download the PSD version or the HTML/CSS coded variant.

  • 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 completely experimental set of nine different button concepts from which you can take inspiration. They are flat-styled, not-so-flat styled or slightly 3D-looking. In any case, each one of them has potential, as long as you can implement the ideas well with your design. All credit goes to CodePen user alassetter.

  • 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 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 fantastic set of social buttons that intend to provide a slightly different alternative to the usual "Pure CSS3" or "HTML5 Canvas" buttons by using the traditional background-image technique. The buttons are monochromatic and versatile, combining well with most designs and working across multiple browsers.

  • 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 delicate set of social buttons for your website, letting users connect to Twitter, Facebook and Google+. The buttons come out of a smaller box with an arrow below which can be clicked in order to hide the selections, this also changes the arrow button's appearance. Created by Amit Agarwal.

  • 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 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 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 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 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 cool set of social networking buttons created with pure CSS. They feature a smooth bounce animation when hovering the mouse over them, which gives the icons a solid and attractive look. Also, their inactive state contains a soft opacity effect. Uploaded to CodePen by Dec Norton.

  • A set of social buttons that show a fancy tooltip when visitors hover over them. The buttons themselves are styled in classy monochromatic fashion and provide nine different options for the user to share content. This demo also includes a beautiful gradient background. Uploaded to CSSDeck by JjoZex.

  • An ingenious design that provides a set of social share buttons carrying nice textures and dashed borders, making them look as if they were hand-stitched. They highlight slightly on hover to notify interaction. These items were created with pure CSS by Kasper Mikiewicz, based on a design by Joel Siddall.

  • A button that flips like a coin, smartly designed in CSS3. Click on the X element in the middle and it will flip around with a brighter, blue appearance to indicate it is active. This could be particularly useful for switches or similar items. It is supported only on Webkit browsers.

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

  • A beautiful pair of colorful 3D buttons with subtle shadow effects and a very (and I mean very) smooth animation that responds supremely quickly to our inputs. This is a fork of a project from Chris Coyier, developed by Neil Kinnish in which he cleaned up a little bit.

  • 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 sliding set of social buttons made in CSS and created by Marius Balaj, inspired on a Dribbble shot by Paul Flavius Nechita. It includes buttons for Facebook, Twitter, Google+ and LinkedIn.

Leave a comment

9 comments for CSS Buttons
  • 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