WebAppers

/ best free open source web resources /

Shopify

Waves – Click Effect Inspired by Google’s Material Design

Posted · Category: BSD License, Buttons

Waves is click effect inspired by Google’s Material Design. It’s easy to use Waves. Download the latest version of Waves from Github repository. Just include waves.min.css and waves.min.js to your HTML file. And Waves is ready to use.

Waves works in latest modern browser (i.e. Chrome, Firefox, Opera and Safari) and also IE10+. Waves is partially support mobile device by using touchstart and touchend event. Waves currently in beta version. It’s still buggy, and lot of changes will happen until it reach general available state.

google-click-effect

Requirements: JavaScript Framework
Demo: http://publicis-indonesia.github.io/Waves/
License: BSD License

Flexible & Good-Looking Share Button jQuery Plugin

Posted · Category: Buttons, License Free

All the major social networks have their own share buttons but they are slow-loading, and inject a lot of extra javascript onto your page that’s not needed which makes your page slower. They don’t look sexy and fit nicely with your site like you want, and you can’t change how they look.

Share Button is a simple, light, flexible, and good-looking share button jquery plugin. It doesn’t load any iframes or extra javascript and overall load time is tons faster. It looks simple and clean by default, and can be customized in any and every way. It’s tiny and compact, expanding only when the user actually wants to share something.

share-buttons

Requirements: jQuery Framework
Demo: http://carrot.github.io/share-button/
License: License Free

A Collection of CSS3 Powered Hover Effects

Posted · Category: Buttons, MIT License

Hover.css is a collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS and SASS.

All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS and SASS flavours. Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don’t support these features may need some extra attention to be certain a fallback hover effect is still in place.

hover-css

Requirements: CSS3
Demo: http://ianlunn.github.io/Hover/
License: MIT License

A Set of Flat & 3D Progress Button Styles

Posted · Category: Buttons, License Free

Progress Button Styles is 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.

Please note that they are using transitions on pseudo-elements which are still not supported in some browsers (e.g. Safari and Mobile Safari). Also note that we need transform-style: preserve-3d support for the 3D styles, which neither IE10 nor IE11 support.

loading-buttons

Requirements: -
Demo: http://tympanus.net/Development/ProgressButtonStyles/
License: License Free

Email Buttons Generator with Enhanced VML & CSS

Posted · Category: Buttons, License Free

Bulletproof Email Buttons Generator helps you design gorgeous buttons using progressively enhanced VML and CSS. You can change the background text, background image, background color, border width and color easily as well. You can also create rock-solid background images in emails too. 

email-buttons

Requirements: -
Demo: http://www.campaignmonitor.com/resources/buttons/
License: License Free

jQuery Plugin Animates Buttons when Loading

Posted · Category: Buttons, License Free

Loda Button is a simple jQuery plugin animates the button’s icon as the data are being fetched from the server. The classes loda-btn and loda-icon are used by the plugin to style the button. The styling is quite simple and done in loda-button.css. The animation is created using CSS3′s animation, transitions and transforms, which are supported by Chrome, Firefox, Opera, and IE10.

loading-buttons

Requirements: jQuery Framework
Demo: http://lugolabs.com/blog/2013/06/23/loda-button
License: License Free

Creative and Modern Button Styles and Effects

Posted · Category: Buttons, License Free

Codrops has shared some Creative Button Styles for our inspirations. This button set consists of some simple, creative and subtle styles and effects to inspire you. The effects can be seen when hovering on some buttons and clicking on others. Mostly, CSS transitions are used but also CSS animations and for some buttons we use a bit of JavaScript to add/remove effect classes.

Buttons

Requirements: CSS
Demo: http://tympanus.net/Development/CreativeButtons/
License: License Free

Ladda Merges Loading Indicators into Buttons

Posted · Category: Buttons, MIT License

Ladda is a set of buttons which merge loading indicators into themselves to bridge the gap between action and feedback. It’s a UI concept which merges loading indicators into the action that invoked them. Primarily intended for use with forms where it gives users immediate feedback upon submit rather than leaving them wondering while the browser does its thing.

loading-buttons

Requirements: JavaScript Framework
Demo: http://lab.hakim.se/ladda/
License: MIT License

How to Create 3D Social Media Buttons with CSS3

Posted · Category: Buttons, License Free

Social media buttons are presented today on every website design. They are used to promote your business on social networks and get in return potential customers. There are plenty of free social media icons sets out there but in this tutorial show us how to Create 3D Social Media Buttons with CSS3. It’s free to use these buttons into your projects and create new ones.

social-buttons-css3

Requirements: CSS3
Demo: http://flashuser.net/tutorial/css3-social-media-buttons/
License: License Free

Flat Style UI Kit with PSD and HTML Format

Posted · Category: Buttons, CC License

Flat UI Free is made on the basis of Twitter Bootstrap in a stunning flat-style, and the kit also includes a PSD version for designers. Flat UI Free contains many basic and complex components which are great for designers to have at hand: buttons, inputs, button groups, selects, checkboxes and radio-buttons, tags, menus, progress bars and sliders, navigation elements and more.

Colored, stylish icons can easily be modified and used in a wide variety of projects, as they contain original layers. Glyphs are also available in psd, html/css and svg formats. The kit also includes color swatches – no worrying over color choices here – with 10 colors that perfectly suit each other. Flat UI Free is made using the Lato typeface, which can be downloaded for free.

flat-ui

Requirements: -
Demo: http://designmodo.com/demo/flat-ui/
License: Creative Commons 3.0 License

Page 1 of 41234»
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons