mob_port_21200
Project: Making a FAB
Client: Rainforest Wordpress Theme

Floating action buttons are used for a promoted action. They are distinguished by a circled icon floating above the UI and have motion behaviors that include morphing, launching, and a transferring anchor point.

  • HTML: to create the necessary structure.
  • CSS: to style our Floating Action Button.
  • Javascript: for button animations.
  • jQuery: The Write Less, Do More, JavaScript Library
  • PHP

Project Task

Rainforest is a Material Design Multipurpose WordPress Theme. Built with Bootstrap, responsive and mobile first framework, and designed to adapt itself to any device. Developed under SEO best practices and compatible with most popular SEO Plugins.
Allows you to Keep your buyers and users informed about your products, services and what’s new in your company.

Floating action buttons are used for a promoted action. They are distinguished by a circled icon floating above the UI and have motion behaviors that include morphing, launching, and a transferring anchor point.

The floating action button should be placed 16dp minimum from the edge on mobile and 24dp minimum on tablet/desktop and has an ink wash upon focus and lifts upon being selected.

Make floating action buttons positive actions like Create, Favorite, Share, Navigate, and Explore. Use the circle-shaped icon consistently to enforce the primary action pattern across apps. Don’t give the floating action button extra dimension.

Common transitions include Trigger, Toolbar, Speed dial, and Morphing. This is not an exhaustive list. Floating action buttons are designed to be flexible. Experiment with transitions that best suit your app and the screens on which the button sits.
The floating action button can simply trigger an action or navigate somewhere. The animation of the touch ripple expands outwards as the force that causes changes to the UI.

As a general rule, have at least three options upon press but not more than six, including the original floating action button target. If you have two options—i.e. your floating action button only flings out one other choice —choose which action is most important. If you have more than six, users may have trouble reaching the furthest option.

Skills Involved

  • HTML: to create the necessary structure.
  • CSS: to style our Floating Action Button.
  • Javascript: for button animations.
  • jQuery: The Write Less, Do More, JavaScript Library
  • PHP

The Result

fab

Leave a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Submit