At its core the secret to a great application or website is not about showing off fancy visuals, sliders or animations, but lies in creating an excellent user experience through a navigation and clean layout, that guide them to where they want to go quickly and effortlessly. Nowadays users are used to mega toolbars, but quite often they are confused by a row of buttons or they get lost in tricky menus. That said, displaying only single action/menu button could be an improvement from a usability perspective.
Google’s Material Design strives for clean, UI focused design and simplicity. Therefore it recommends to use single floating action button, better known as FAB. In Material Design language, navigation of the website or app should be considered more carefully. Application user’s possible actions should be boiled down to a single most prominent feature. Assuming that majority of the screen is for reading and content consuming, FAB placement is important in drawing user’s attention. If it gets in the way when scrolling down, floating action button could be easily hidden.
In some cases, single action button is not sufficient to provide great experience for application users. Designers need to come up with effective solutions and find a new ways to make navigation more comfortable and easy to use, yet without loosing core functionality. And here are excellent examples how to achieve this.
It’s appropriate and even recommended for the FAB button to spin out and expose a few other options:
FAB concept by Virgil Pana :
Developer Lucas Bebber shows how to achieve same effects using CSS and SVG filters (click menu button to see transitions in action):
Version 1
See the Pen CSS Gooey Menu (Version 1) by Lucas Bebber (@lbebber) on CodePen.
Version 2
See the Pen CSS Gooey Menu (Version 2) by Lucas Bebber (@lbebber) on CodePen.
Version 3
See the Pen CSS Gooey Menu (Version 3) by Lucas Bebber (@lbebber) on CodePen.
Version 4
See the Pen CSS Gooey Menu (Version 4) by Lucas Bebber (@lbebber) on CodePen.
#development #CSS #examples #button #inspiration #webdesign #app #materialdesign #websites #application #concept
Its amazing how people can be creative , Is it possible to use something like that in blogger ? How?
Custom create web page buttons with CSS3 button generator and CSS3 button creator. buttongarage.in
tanks tanks