40+ CSS Snippets for Web Developers
Using good quality CSS snippets is an excellent technique for quickly adding great looking and interactive elements to you web pages.
CSS is the most important web standard for styling web pages and it is hard to find a website today where it is not used. CSS is well supported in most browsers and together with HTML5 and jQuery it is the most commonly used approach for implementing highly interactive and lightweight web page effects.
When it comes to using CSS, it is known to be a bit hard to learn for beginners. You can find tons of tutorials and video introductions to get your skills build up, however, it is also a good strategy to look for existing solutions you like and check how they have been coded.
With CSS being so popular there are literally thousands of useful CSS snippers available and free to use. Web designers can use these their work to speed up the process and to learn from other developers. Finding the best snippets, however, takes time and it is recommended to build up a toolbox with useful snippets for common programming tasks like e.g. styling a rounded button, adding styling to a form. To help you in building up your own CSS toolbox, I have created a collection of some of the best CSS snippets. Most of these are easily implement in your web projects and I have added images to show you what to expect from each if them. I myself find CSS the snippets extremely useful and I hope you will too. Enjoy!
A set of sleek, glossy buttons in multiple colors.
A set of social media buttons for tweeting, liking, and subscribing. The icons are image-based but a double-resolution version is included for high-density screens.
A set of multi-colored buttons with hover and active states. These are generated from a single input color using Sass functions.
A set of social media share buttons with a 3D effect that makes you want to click them!
A set of multi-colored 3D buttons. Include a normal, hover and active state.
Social Sprites Icons is a set of commonly used social icons that transition using CSS ease. This set is super lightweight and could easily be integrated into any website. There are two versions for the icons. One with white background for normal state and a transparent background version. On hover, the icons background color will change to the official color of the social network. All of the icons are in one sprite png that totals 26.1 KB.
A little idea to save your space. This is a collection of icons from various social network ready to be used on your website. In addition to the icons there are some Footer with share icons. It’s ready to use with 25 customizable icons, 5 different footer colors and 5 animations with 5 effects.
A simple app navigation with colorful notification badges. The badges are generated from a single input color using Sass functions, which you can easily customize to create your own.
A tiny blue progress bar in a shiny “metallic” container. Check out the source for an example of using multiple gradients on a single element.
Multi-step Indicator – MORE INFO
This Multi-step Indicator is an implementation of the Progress Bar Design Pattern, also known as “Progress Indicator”, “Multi-step Progress Bar”, “Wizard Steps”, “Progress Train”, and “Steps Left”. It is responsive and comes in two slightly different implementations (Modern and Legacy), 2 different styles and some color variations.
A set of fully functional toggle switches in multiple colors. Useful for switching views and toggling settings. The functionality is achieved through hidden radio inputs and the use of the
+/~ sibling CSS3 selectors. Enjoy the smooth on/off transition.
A set of tags with nice, colorful counters that slide from the tag’s edge.
Fancy Banners CSS3 – MORE INFO
A pure CSS3 fancy text banner using transforms, pseudo-elements, last-child, and more!
A simple login form in Facebook color scheme.
A simple newsletter / mailing-list sign-up form.
An elegant contact form in a modal box with a custom dropdown and round submit button.
A clean and simple login form with a round submit button and elegant focus states.
CSS3 menu with notification badges – MORE INFO
A colorful and fun CSS3 menu that can notify you about your website activities in the dashboard.
Metro – CSS3 Mega Menu – MORE INFO
responsive Mega Menu is built on Bootstrap, an open source front-end framework developed by Twitter. With the flexibility that Bootstrap offers, responsive Mega Menu, helps you create various mega menus with just a little bit of customization to the regular ones available with the framework.
Simple Responsive Menu – MORE INFO
“Simple Responsive Menu” is a navigation component based in pure CSS. This menu uses gradient colors and CSS effects to provide a beautiful design. It is a responsive menu component and can be used in various website types.
Gimel is a pure CSS responsive navigation, optimized for mobile & touch devices. It follows the popular trend of “flat design”, focusing on beautiful colors and bold typography. Therefore, its design is simple, but usable and easy to integrate. On mobile devices, the fluid horizontal menu turns into a vertical menu which can be toggled with a click/single tap. Warning though: the menu can handle only one-level submenus.
A set of custom
<select> element with a wrapper element to hide the dropdown arrow.
A round search box with a fancy search suggestion / autocompletion.
A simple vertical navigation menu with icons, counters, and sub menus.
A stylish mini dropdown menu that show/hide on hover.
A settings panel with a set of sliding switches and OS X-like title bar.
A light, inset side navigation menu with button links.
Toolbar CSS snippet – MORE INFO
A cool toolbar slash menu for your website.
A dark navigation menu bar complete with hover and active states.
A dark version of the chunky navigation menu.
An elegant tabbed navigation menu with dropdown menus.
A “skeuomorphic” flip-down clock for your countdowns and timers. As usual this is all done with CSS using CSS3 gradients and shadows.
A dark pop-up date picker with a slick navigation bar and crip shadows.
A selection widget with a shiny selection indicator. Implemented as a month picker. Created with a set of labels and radio buttons, and using the :checked CSS3 selector.
A dark pagination complete with hover and active states.
An elegant notepaper blockquote achieved through pure CSS. Properties used for this snippet include radial-gradient, repeating-linear-gradient, transform, and some :before/:after magic for the curly quotes. It’s flexible in width/height and degrades well on older browsers.
A realistic notepad with a lined paper background and hidden pages at the bottom. The lines are created using linear gradients, making the content fully flexible in width/height and keeping the markup clean.
This CSS snippet navigates the pages using the arrows or swiping the pages, and to slide out the menu when clicking on the menu button. The sidebar menu will contain links to different pages, i.e. the table of contents. When clicking on a table of contents entry, you’ll jump to the respective page.
An animated profile popover / context menu with a nice show/hide transition. Both height and opacity are animated on hover using CSS3 transitions.
The Tooltip is a handsome, modern gentleman that appears when it’s showtime.
An OS X-style transparent window with a set of CSS3-powered toggle switches.
Mac OSX-like Animated Folder with CSS3 is a snippet that uses a OSX-like folder that can have drag and drop interactions with the objects in your site.
This CSS3 snippet creates a fullscreen slideshow with a twist: it slices the current slide open in order to reveal the next or previous slide.
A set of flat notification windows with pure CSS icons. The icons are created using before/after pseudo-elements (no extraneous markup) and CSS3 transform functions. They even work in IE 8 where Unicode characters make up for the lack of CSS transforms support.
A mini social app with tabs, hover/active effects, and nice avatar overlays.
Mini audio player CSS simulation – MORE INFO
A CSS audio snippet simulating a mini audio player. Complete with Select Album photo and Navigation Bar. Works like one too.
CSS3 Web Pricing Tables Pack (Grids) is a pack of pure CSS3 Pricing Tables with 2 table styles and 20 predefined color versions including: hover states, animations, ability to add a custom ribbon to the column header, possibility to set one or many columns as active (popped-up) by default, table cell tooltips. This version is dedicated for any custom CMS based site.