CLOSE
    A growing repository with 723 bundles & 9625 resources for web ninjas
    (freebies, plugins and snippets) updated & curated every day, so it never expires.
CLOSE
    • SVG Backgrounds (6 submissions)

      SVG backgrounds demos put together in code playgrounds.

      • SVG Low-poly Background CSS and JS Snippet

        A code snippet made in CSS and JavaScript which creates an animated background in low-poly style. It is perfect for any kind of website, although its modification is a bit painful, especially its colors. The snippet is free and it was created by Samuel Marchal.

      • CSS SVG Background Image

        Yet another SVG background image project featuring a neat texture made in CSS. This time, we get multiple lines going diagonally across the design providing a very subtle effect that makes the background less plain, without gathering too much attention. It was created by CodePen's user Alex.

      • CSS SVG Background Images

        The final result of this project displays an amazing background image that combines a violet-to-blue diagonal gradient with a set of lines going across it, generating an impressive effect that is guaranteed to stand out. Created and uploaded to CodePen by Philip Rogers.

      • Light SVG Background Image

        A project that provides a background image with SVG, incorporating a very subtle texture over a solid white base. It makes use of HMTL, CSS (LESS) and JavaScript to function, while the SVG is encoded as a base64. It was created by CodePen's user Phillip Rogers.

      • Dark SVG Background Image

        Phillip Rogers from CodePen came up with this idea for a texturized background combining HTML, LESS and JavaScript. It features a dark gray base with black holes organized diagonally, creating an attractive effect and giving a bit more profile to an otherwise uninteresting image.

      • Noisy SVG Background

        A nicely styled background image created with HTML, LESS (a variant of CSS) and JavaScript. It features a noisy texture, creating an illusion similar to sandpaper, bringing out the background. This code snippet was designed and published by CodePen's user Phillip Rogers.

      • Collapse Expand List View all items Download Bundle Submit
    • CSS Treeview (8 submissions)

      A very useful set of snippets for creating tree views in pure css.

      • Pure CSS Treeview Menu

        A snippet able to take the HTML code and the CSS to create a tree view menu without the use of Javascript, perfect for websites or apps in need of content storage and management. The design is simple, understandable, it has icons for folders but doesn't have icons for files, and also, it shows some items disabled by default.

      • Pure CSS Collapsible Tree Menu

        This tutorial is a step by step guide that helps you in the process of creating a compelling collapsible tree menu. It explains how to add layers for creating a multi-level nested tree. It counts with beautiful minimal folders and files' icons, and it's very easy to catch. The tutorial helps you create the tree, so you can understand every element and make them, or grab the code so you can implement it directly on your website or blog.

      • Tree for Nesting Folders with Two Different V...

        The following code snippet creates two different versions of a tree for nesting folders. In the first one, the admin and guest items are interpreted as files, unlike the second one, where they are shown as folders. There are two different kinds of icons (for folders and files) and it style is minimal. These cool tree models were created by Codepen's user yaoyi.

      • Custom Checkbox Treeview created with HTML, ...

        This is a treeview with custom checkboxes and indeterminate state created with HTML, CSS and JavaScript. The cool thing about it is that if you choose a child element, the parent element gets selected automatically, and if you select the parent, every one of its child elements get selected automatically. You can replicate the code to create as many parent and child elements you need. It was created by Codepen's user Fabien.

      • Folders with No JavaScript

        Here, Codepen's user Ty Strong put together this code snippet in which we have some collapsable folders without the need of JavaScript, only using HTML and CSS. It has folders closed by default, open by default, subfolders, nested items and disabled nested items. The design is simple, complemented with folder icons and different colors for elements.

      • Nested Folders Done with CSS and HTML

        Aleks from Codepen came up with this interesting way of nesting folders with CSS and HTML. The example shows you all the states like closed by default, open by default, nested items and more. The items and folder lack of indicators, like icons, but they can be integrated easily. The whole  snippet has a cool design.

      • Complete & Customizable CSS Tree Diagram

        Do you want to present some information like a tree diagram, but don’t want to use any flash widget or images? So Vadim Grachev shares with us a complete and customizable tree diagram in pure CSS and HTML. It  is supported by all browsers. ✓ Chrome 25.0 ✓ FireFox 19.0.2 ✓ Safari 5.1.7 ✓ IE 10

      • Pure CSS Tree Menu Framework

        Taufik Nurrohman from CSSDeck brings us this stripped-down design for a tree menu framework based on a tutorial seen at Odyniec, but tweaking it a bit in order to completely avoid JavaScript and use pure CSS for styling, including pseudo-elements for the branches.

      • Collapse Expand List View all items Download Bundle Submit
    • CSS Buttons (64 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.

      • Mobile-friendly Online Social Buttons Generat...

        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 to use on any responsive website or app. You can use this tool freely.

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

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

      • Animated Material Design CSS & jQuery Bu...

        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.

      • CSS & JavaScript Flipping Button

        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.

      • 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 skype, although you can add any social network since it uses FontAwesome icons.

      • Favourite Outlined Flat CSS Button

        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.

      • Pure CSS Material Button Snippet

        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.

      • WhatsApp Online Sharing Button Generator

        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.

      • Animated CSS Twitter Button

        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.

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

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

      • Round Icon Wave CSS3 Animation

        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 created by Jascha Goltermann and its free the use and modify.

      • Flat CSS Menu Toggle Button

        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.

      • FTP CSS Cloud Button

        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.

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

      • Social CSS Sliding Buttons

        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.

      • Hover CSS Social Buttons

        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.

      • 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 design. All credit for this project goes to CodePen's Felipe Marcos.

      • Blue & Yellow CSS Pressable Buttons

        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.

      • Twitter Logo CSS Animated Button

        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.

      • 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 see the buttons sink slightly along with the light. Coded by Bobby from CodePen.

      • CSS3 Animated Flip Toggle Button

        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.

      • Hand Stitched CSS Social Media Icons

        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.

      • Red & White Dots CSS Social Buttons

        A beautiful concept for a trio of social buttons that come with a rather particular (but very attractive) style: Red and white dots. These polka-dressed buttons have noticeably different states, expanding on hover and becoming darker when clicked. Coded by Chris J. Lebron.

      • CSS Social Buttons with Tooltips

        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.

      • CSS Bouncy Social Icons

        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.

      • Animated Submit CSS Button

        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.

      • CSS Animated Social Icons

        A cute set of animated social buttons, perfect to promote yourself at the end of any website, for example. The icons appear with a simple gray style, then sliding to full color once we move the pointer over them. The sites provided are Dribbble, Behance, Facebook, Twitter and Instagram. This snippet was created by Ryan Bishop.

      • 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 HTML in an easy way.

      • 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 design. The name of the website can also be seen in text with the hover animation.

      • CSS3 Animated Social Media Icons

        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.

      • 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 shot from Caleb Andrews.

      • CSS3 Inner Animation Social Buttons

        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.

      • CSS Hideable Social Share Buttons

        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.

      • 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. Coded by Marco Biedermann, inspired on a Dribbble shot from Zach Roszczewski.

      • CSS Social Buttons Package

        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.

      • 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, animations provide a smooth "push" illusion.

      • Happy & Colorful CSS Buttons

        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.

      • Experimental CSS Button Templates

        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.

      • 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 enlarged at will. Based on a Dribbble shot by JustD.

      • CSS Rounded Social Icons

        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.

      • CSS Monochrome Social Icons 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.

      • 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 hover effect to the set.

      • Free Clean Icons Set

        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.

      • 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 fans (that can be replaced by any other piece of information).

      • Red CSS Social Buttons

        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.

      • CSS Flying Twitter Bird Follow Button

        An awesome little social button that allows you to link visitors to any given Twitter profile with a smart animated element. It starts with a simple Twitter bird located on the top corner of the screen, when the user hovers over it, the bird moves to open space to a "follow me" button, while it begins to move its wings in flying motion.

      • Sass Flat Design Buttons

        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.

      • 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 as box shadows, transitions and transforms.

      • 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, squeezing and expanding accordingly.

      • 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, ensuring you can find the right one for your web project.

      • Amazing CSS3 Pressable Button

        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.

      • Classic CSS Social Buttons

        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.

      • CSS Twitter Button Concept

        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.

      • CSS Multicolor Sexy Buttons

        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.

      • CSS Shine Effect Social Buttons

        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.

      • 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. Uploaded to CSSDeck by Rishabh.

      • 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 the full-color versions of the icons. Uploaded to CodePen by Charlotte Dann.

      • CSS Bootstrap Flat UI Buttons

        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.

      • Icon Fonts: CSS Social Count Meets Style

        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.

      • Multiple State CSS3 Buttons

        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.

      • Kickstarter Inspired CSS Button

        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.

      • 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 neon-like effect. Uploaded to CodePen by Lopez Hugo.

      • Collapse Expand List View all items Download Bundle Submit
This a test message in global notification
Your download will start shortly.

Done!

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

Browse
Done

Thank You!

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

Open bundle builder

Bundle Builder

0 elements selected | Clear all ×

Select the bundle you want to add the items to.

Search bundle (filter by name)
Create new bundle
×

Add new bundle

×

Edit bundle