CSS Buttons

- Large Pressable CSS3 Navigation
  
  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 an...
- Item added by
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  Share
  
  Source
- flag
- Colorful CSS Button Effects
  
  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.
- Item added by
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- CSS Button Hover Styles
  
  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.
- Item added by
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- Image Hover Animation
  
  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.
- Item added by Comatose...
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- CSS & JS Toggle Navigation Buttons
  
  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.
- Item added by
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- CSS Social Flip Cards
  
  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...
- Item added by Francisc...
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- Button Hover Effect with Box-Shadows
  
  Fun snippet uploaded by Codepen user Giana. Basic animations with box shadows. No extra elements or pseudo-elements required.
- Item added by Admin
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- Radial Menu Button Social Widget
  
  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.
- Item added by SteveCar...
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- CSS Animated Voting Buttons
  
  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.
- Item added by Admin
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- Squishy & Shadowed CSS Buttons
  
  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.
- Item added by
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- CSS Material Design Social Buttons
  
  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 sk...
- Item added by
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- Google Inspired CSS Floating Action Button
  
  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.
- Item added by MiltonKi...
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- Stylish Hand-drawn CSS Buttons
  
  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.
- Item added by Admin
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- Animated Material CSS Loading Button
  
  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 ...
- Item added by
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- CSS Animated Button Styles Collection
  
  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!
- Item added by Admin
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- Rotating Icon Buttons CSS Snippet
  
  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.
- Item added by AndreCou...
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- Slide to Open CSS & jQuery Toggle Button
  
  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.
- Item added by MaxiGuti...
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- SVG CSS & JavaScript Goo Animation
  
  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.
- Item added by
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- CSS & JS Animated Download Button
  
  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.
- Item added by Philippe...
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- CSS Selected Radio Button
  
  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 t...
- Item added by Admin
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- CSS Animated Send Button
  
  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.
- Item added by Admin
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- CSS & JS SVG Download 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.
- Item added by Admin
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- Pure CSS 3D Flip Buttons
  
  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 an...
- Item added by Admin
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- Pure CSS On-hover Atom Button
  
  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.
- Item added by Catherin...
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- Pure CSS Favourite Button
  
  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.
- Item added by
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- CSS Simple Hamburger Menu Icon
  
  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.
- Item added by Admin
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- CSS-only Material Design Buttons
  
  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 Bren...
- Item added by LaurenBa...
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- Bttns.css: Simple Online CSS Buttons Generator
  
  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.
- Item added by
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- CSS & JS Delete Button
  
  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.
- Item added by teddypie...
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- CSS 3D Button Snippet
  
  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.
- Item added by
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- Animated CSS Download 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 loading bat shape, and shows a thick as it finishes.
- Item added by teddypie...
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- CSS Flat Button Shapes
  
  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.
- Item added by Admin
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- CSS Pulsable 3D Buttons
  
  Handy set of Pressable 3D styled Buttons in pure CSS
- Item added by AndreCou...
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- Expandable Share CSS Button
  
  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.
- Item added by Admin
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- Animated Material Design CSS & jQuery Button
  
  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, ...
- Item added by SamKrull...
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- CSS Animated Sliding Social Buttons
  
  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 s...
- Item added by
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- Simple Icon CSS Hover Effects
  
  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.
- Item added by NigelSmi...
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- CSS Call-to-action Buttons
  
  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 Hosse...
- Item added by
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  Share
  
  Source
- flag
- Fancy CSS Hover Icon Fonts
  
  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 hove...
- Item added by MaxiGuti...
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  Share
  
  Source
- flag
- Incredible CSS Share Button
  
  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 a...
- Item added by JungleBo...
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  Share
  
  Source
- flag
- CSS Social Sharing Button with Tooltip
  
  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 desi...
- Item added by
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- Sinograph Panel: CSS UI Concept
  
  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 neo...
- Item added by RajRases...
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- CSS & JavaScript Double Light Switch
  
  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 HT...
- Item added by AlexChap...
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- Cool CSS Buttons Collection
  
  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 desig...
- Item added by MiloPedr...
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- CSS 3D Facebook Button Concept
  
  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 ...
- Item added by
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  Share
  
  Source
- flag
- CSS Pressable 3D Buttons
  
  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,...
- Item added by JimmyBut...
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  Share
  
  Source
- flag
- One Tag iOS-Like CSS Buttons
  
  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, squee...
- Item added by RickMart...
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  Share
  
  Source
- flag
- CSS Bright Button 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 buttons, allowing only one selection to be active at a time. The elements can be reduced or enlarg...
- Item added by
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- Fancy & Pushable CSS 3D Button
  
  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, ani...
- Item added by AlexChap...
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  Share
  
  Source
- flag
- CSS Flat Social Navigation
  
  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. Cod...
- Item added by LaurenBa...
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- CSS Material Multi-button
  
  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...
- Item added by Admin
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag
- Simple Colorful CSS3 Social Buttons
  
  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. Up...
- Item added by RajRases...
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  Share
  
  Source
- flag
- Active LED CSS Button
  
  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 se...
- Item added by ChuckBar...
  Flag
  
  Leave a comment
  
  Comment cannot be empty.
  
  Write a comment
  
  Download
  
  Share
  
  Source
- download
- flag

21 comments for CSS Buttons

Thank you very much saves me a lot of trouble you guys.
Reply · 0 | 2017-04-09T20:44:51+0000
- Or
Email field is required

That's the idea eduard !
Reply · 0 | 2017-05-04T11:14:58+0000
- Or
Email field is required

Great, excellent job. People you are awsome
Reply · 0 | 2017-04-07T16:40:40+0000
- Or
Email field is required

Oh thanks for your words, that's what we need to keep working ;)
Reply · 0 | 2017-05-04T11:15:29+0000
- Or
Email field is required

Came here searching for one, ended up downloading more than 10. Great work guyz.
Reply · 0 | 2017-03-05T03:59:40+0000
- Or
Email field is required

That's great ! keep downloading and please share with your friends !
Reply · 0 | 2017-03-31T12:12:05+0000
- Or
Email field is required

Way Cool!
Reply · 0 | 2016-09-29T13:15:35+0000
- Or
Email field is required
nice:))
Reply · 0 | 2016-06-05T12:21:58+0000
- Or
Email field is required

Thanks! :)
Reply · 0 | 2016-06-13T11:39:03+0000
- Or
Email field is required

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 · 0 | 2016-05-21T01:03:50+0000
- Or
Email field is required
thanks :))
Reply · 0 | 2016-03-30T18:16:10+0000
- Or
Email field is required

No worries! Keep tuned for more cool stuff :)
Reply · 0 | 2016-04-19T11:29:39+0000
- Or
Email field is required

Good Work Thnks
Reply · 0 | 2015-04-29T06:43:28+0000
- Or
Email field is required

Much appreciated! Enjoy our whole coding sections. :)
Reply · 0 | 2015-04-29T09:37:00+0000
- Or
Email field is required

I really enjoyed looking through these. Very inspirational. Thanks.
Reply · 0 | 2015-04-26T12:24:59+0000
- Or
Email field is required

Awesome! Let us know if you decide to make something great based on this. ;)
Reply · 0 | 2015-04-27T09:44:12+0000
- Or
Email field is required

Good work thanks a lot frnd
Reply · 0 | 2015-04-22T00:39:56+0000
- Or
Email field is required
great and suprb
Reply · 0 | 2015-04-22T00:39:31+0000
- Or
Email field is required