1

When copying some text on Android, Google Translate displays a floating button on the side of the screen (top / right) that can be tapped to translate or just dragged up and down to not be obstructive.

enter image description here

What is the technical name of it?

It looks like a coin, but I cannot find any specific name or pattern for the implementation (in web development with JS/CSS) of these buttons.

1 Answer 1

2

Material refers to this as a Floating Action Button (FAB).

The transition to a menu shown in your example is considered one of the potential uses

Types of transitions

Upon press on Android, the FAB can transform into a menu containing related actions. A scrim indicates that functionality outside of the action menu is temporarily disabled. The menu remains on-screen until an action, or the scrim, is tapped.

Here's a snapshot example from the docs when a FAB turns into a menu: enter image description here

3
  • 1
    I'd recommend expanding on the FAB being a "floating action button." I read OP's question as more asking about the actual button rather than the menu ("...a floating button on the side of the screen...It looks like a coin..."), but good information nonetheless. I haven't seen these kinds of FAB transitions before, so this was interesting. Jan 23, 2019 at 16:32
  • Yes, thanks for the reference, is still good info. But maxathousand nailed what I was actually asking (a side -floating & draggable- button). Jan 23, 2019 at 16:49
  • ah yes...It is a Floating Action Button, as for the name.
    – Mike M
    Jan 23, 2019 at 17:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.