Skip to Main Content
Flicker Fix For Loops

Floating Action Button

Add a floating action button that stays anchored at the bottom corner just like in popular mobile apps

Click to see the  Original Article

Step 1

Add a Button to Your Page In Page Designer, add a new Button (e.g., “Add”) to your APEX page. 

Set its class to c-floating-bt. Choose an appropriate icon (like fa-plus or fa-camera). 

Step 2: 

Apply Custom CSS Add the following CSS to your page (Page > CSS or in your app’s CSS file): 

.c-floating-bt {
  position: fixed;
  bottom: 80px;
  right: 10px;
  z-index: 100;
  height: 65px;
  width: 65px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  font-size: 2rem;
}

The button will appear at the bottom right of the page.