background preloader

Buttons / icons

Facebook Twitter

Connoratherton. 40 Sets of Free Social Media Icons. This post was originally published a few years ago.

40 Sets of Free Social Media Icons

Some of the icon sets showcased in the original post are no longer online, so we’ve updated the post by removing the dead links and outdated icon sets. We’ve added many new icon sets as new social media sites are always popping up and many of the older sets didn’t include icons for sites like Pinterest that are now very popular. Design trends also change over time, and we’ve added links to a number of sets that use a trendy flat style of design. Designers love free icon sets. Having quality icons can help to make a site’s design look complete, and can also help with the usability of the site. Arrow Navigation Styles. Some inspiration for arrow navigation styles and hover effects using SVG icons for the arrows, and CSS transitions and animations for the effects.

Arrow Navigation Styles

View demo Download source Today we’d like to share some inspiration for arrow navigation styles with you. There are so many creative ways of showing those little elements that are an essential part of many websites nowadays. You can find them in content slideshows, as part of the page navigation, in image galleries and many more. These indicators are mostly represented as arrows that point to the left and right. These effects are for your inspiration. The images used in the demo are by Joanna Kustra, Idleformat and Andrey Yakovlev & Lili Aleeva. One of the effects, the Slit effect, is inspired by the cool effect from Jam3’s work navigation.

An example for one of the style is the following: The arrows are SVGs which we include using the technique described by Oleg Solomka in his article SVG Icons FTW. The CSS is the following for this example: GLYPHICONS - library of precisely prepared monochromatic icons and symbols.

Free Icons Set designed by Brankic1979 - Free psd. Brankic1979 About icons A set of 350 pixel perfect glyphs icons, perfect for apps, websites or just about anything you can think of.

Free Icons Set designed by Brankic1979 - Free psd

Font Awesome Icons. ySocial jQuery plugin. ClassySocial is a jQuery plugin that lets your site visitors easily see what networks you belong to and visit them in a click of a button.

ySocial jQuery plugin

Currently supports Facebook, Twitter, GitHub, Dribbble, Socl, Youtube, Vimeo, Google Plus, Pinterest, LinkedIn, Instagram and e-mail. Allow your users to see your presence on 11 of the most popular networks instantly with no need for a knowledge of coding! Have links to your Facebook, Twitter, GitHub, Vimeo, Dribbble, Instagram, YouTube (and more!) Creative Button Styles. Some creative and modern button styles and effects for your inspiration.

Creative Button Styles

View demo Download source Today we would like to give you some button inspiration. This button set consists of some simple, creative and subtle styles and effects to inspire you. Creative Link Effects. An inspirational collection of experimental link effects mostly using transitions on pseudo-elements.

Creative Link Effects

View demo Download source Today we’d like to share some experimental and creative link effects with you. The idea is to use pseudo-elements and animate them to create a subtle and modern effect. In the examples we are using hover transitions, but you could also imagine these effects on click or as an initial animation. Creative Loading Effects. Animated Checkboxes and Radio Buttons with SVG.

By animating an SVG path with JavaScript, we can do many fancy things.

Animated Checkboxes and Radio Buttons with SVG

Today we want to show you some effects for checkboxes and radio buttons. The idea is to hide the inputs, use pseudo-elements to create a more appealing style and then animate the SVG paths once an input is selected. Progress Button Styles. A set of flat and 3D progress button styles where the button itself serves as a progress indicator. 3D styles are used for showing the progress indication on one side of the button while rotating the button in perspective.

Progress Button Styles

View demo Download source Today we’d like to share some progress button styles with you. You surely know “Ladda” by Hakim El Hattab, a UI concept that indicates progress directly on the button that invokes a loading action. Animated SVG Icons with Snap.svg. Using SVGs on websites is becoming more and more easy with great libraries like Snap.svg.

Animated SVG Icons with Snap.svg

Today we want to explore what we can do with it and animate some SVG icons as a practical example. View demo Download source SVG has been one of the most underused technologies when it comes to web development. Despite it’s usefulness and powerful possibilities it’s still a mystery to many and when it comes to integrating it and using animations, many developers don’t know where to start. Dot Navigation Styles. Today we'd like to share some subtle effects and styles for simple dot navigation with you.

Dot Navigation Styles

These styles could, for example, be used for a page scroll navigation or a thumbnail preview, in a vertical or horizontal fashion. View demo Download source Small UI elements usually don’t get too much attention when it comes to creative effects. They are often neglected because of their size. But they can offer a great opportunity to add some subtle, yet interesting effects. Note that some effects might not work as intended in some browsers (SVG transition, 3D transform-style). For the structure we’ll have an unordered list with links: Progress Button Styles. Morphing Buttons Concept. Simple Icon Hover Effects.