Monday, July 25, 2016

How To Create A Floating Action Button with Helpful Resources

One of the most talked-of components of Google's new visual language is the Floating Action Button. Basically, it is just a small circular icon that is used as quick access to promoted actions. However, this design pattern has managed to evoke quite mixed feelings.

While it is believed to be a significant enhancement, some developers consider it as a user experience killer. Such controversy is not surprising, since as any brand-new technique it is still on probation, and can be easily interpreted poorly or incorrectly.

If you want to derive benefits from it, you need some background, and we have prepared it for you. Our list comprises various sources, including libraries, plugins, and code snippets that let you clone the component and fake its functionality.

Floating Action Button Helpful Resources

CSS3 Only Reproduction of the Google Inbox FAB by Kyle Lavery

This code snippet exhibits a replica of the floating action button that is created with the help of CSS properties. It has the same look with a subtle shadow and elegant dynamic behavior. It is linked to five actions that are presented as icons with accompanying titles.

CSS3 Only Reproduction of the Google Inbox FAB

FAB in Material UI

One of the main components of this massive UI package is, of course, FAB. It is available in two sizes with various properties that allow setting the background color, overriding inline styles and much more.

FAB in Material UI

Floating Action Button Library for Android

This library lets you add a tiny circular floating icon to any interface powered by Android. To bring the library into play, you need to have Android SDK version 9 or higher. As for features, you can choose from three different sizes and various colors; add shadow or stroke; or apply tiny effects like a ripple.

Floating Action Button Library for Android

FAB Transition Layout

This small FAB-toolbar-inspired library adds a nice touch to transformations. It makes the round icon turn into a narrow, carefully delineated panel that sticks to the footer and houses several essential functions.

FAB Transition Layout

KC FAB

KC FAB is a jQuery plugin for reproducing a floating action button with a sleek, clean and bright appearance. The generated component sits on the bottom and shows two actions after a click. A number of functions can be easily increased via an HTML file.

KC FAB

Android Floating Action Button

The idea of the concept is to provide the FAB with a more native behavior. The plugin creates a button that responds to scrolling events, becoming visible when the target is scrolled up and invisible when it has been moved down.

Android Floating Action Button

Floating Action Button

Much like the previous example, the behavior of this tiny widget depends on scrolling movements. Thus, it can hide or appear when it is necessary. The author has also equipped it with several customization options that result in it being a pretty universal tool.

Floating Action Button

FAB Menu by Mourad Majdoub

While traditionally Material FAB reveals its submenu in a vertical line, this solution charms with its non-standard circular positioning. All the fast actions surround the main icon and can be set to spin by mouse or finger touch.

FAB Menu

A Better Material FAB Menu with SVG and GSAP by Daniel Kemper

The developer combines the powers of SVG and GSAP recreating a more improved version of FAB. Here the set of promoted actions take up a relatively big part of the screen and use a solid round canvas as a background. As a result, the component has a more visual weight.

FAB Menu with SVG and GSAP

FAB Transformation

The library aims to provide owners with support for typical FAB metamorphoses that are described in Material Design guidance. It has two options: transformation to the toolbar on the bottom, and transformation to sheet that overshadows all the content.

FAB Transformation

Android Fab Button with Gooey Effect

The solution looks visually interesting. The skillfully reproduced Gooey effect gives a piquancy to the button and makes it look even more prominent and original. You are allowed to change the number of menu options, minimize or increase the distance between the details, and set other glyphs.

Android FAB Button with Gooey Effect

Paper-FAB-Menu

This small plugin creates a FAB with paper elements within seconds. It supplies users with seven attributes and three methods that can be customized to meet your needs. Note, by default the component is hidden.

Paper-FAB-Menu

Angular.js Material Floating Button Directive by nobitagit

This tiny Angular directive that is also available in Vanilla HTML format comprises a Material Design FAB with a proper semantic core and clutter-free code. You can place it in any part of the screen as well as specify the type of animation by choosing from several options including slide in+fade, zoom in and fountain.

Angular.js Material Floating Button Directive

FAB Transitions

This library comprises methods to spin the FAB creatively by enriching it with tiny yet fancy accompanying animations. It features two types: toolbar animation and material sheet animation.

FAB Transitions

Fab and Dialog Morphing Animation on Android

The solution demonstrates a metamorphosis from the FAB to standard dialog window with a button and content. The shifting is smooth and eye-pleasing. The panel overshadows the main screen and draws the whole attention.

Fab and Dialog Morphing Animation on Android

Material Design Transition/Animation by Kyle Lavery

This is another project by Kyle Lavery in our collection that is dedicated to Material Design floating action buttons. It includes a transformation from a circular button to a full-screen modal window with a 'Close' icon and CTAs. Use it as a starting point.

Material Design Transition

Materialize FAB Tooltips for Mobile & Tablet by Chris St. Amant

The solution is applicable for interfaces of a small or medium size such as cell phones or tablets. As befits the component takes place in the right lower corner and has several hidden actions that become visible on a click.

Materialize FAB Tooltips for Mobile & Tablet

Pure CSS3 Animated Share FAB by Kyle Lavery

Here the FAB is used as a regular 'share' button with quick getaways to Google, Twitter, and Facebook. The amount and type of social media icons can be easily changed via a code file. The concept is lightweight and fast since it is made only with CSS.

Pure CSS3 Animated Share FAB

FAB on Dribbble

Need some inspiration for design or dynamic behavior? Then visit Dribbble that is overpopulated with different examples of FAB. Here you can find various implementations from traditional to unconventional ones presented either as static images or animated gifs.

FAB on Dribbble

FAB to Toolbar Button

This library is suitable for building a FAB that will convert into a small toolbar button that is seen on Android interfaces. It smoothly floats above the content, hides on scroll and turns into a sterling CTA.

FAB to Toolbar Button

Conclusion

There are various ways to duplicate Google's FAB. You can use a plugin, library or simple code snippet, whichever fits your requirements best. While some solutions provide you with a ready component, others allow customizing, assigning animations to morphing or just improving shape and behavior.

Is FAB a blessing or SEO-killer? Do you use it in your projects?



from Onextrapixel – Web Design and Development Online Magazine http://ift.tt/2aqQPUN

No comments:

Post a Comment