Floating Buttons: A Guide to Using This UX Design Element
Floating buttons are a type of UI element that is often used to promote the primary action of an app or website. They are typically circular in shape and appear in the bottom-right corner of the screen. Floating buttons are a great way to encourage users to take action, as they are always visible and easy to access.
When to Use Floating Buttons
Floating buttons are best used for the most important or frequently used actions in an app or website. For example, a music streaming app might use a floating button to play or pause music, while a social media app might use a floating button to post a new status update. Floating buttons can also be used to create new content, such as adding a new item to a shopping cart or creating a new document.
How to Design Floating Buttons
When designing floating buttons, it is important to keep the following things in mind:
Size: Floating buttons should be large enough to be easily clicked, but not so large that they take up too much space on the screen.
Shape: Floating buttons should be circular in shape to make them stand out from other UI elements.
Icon: The icon used for a floating button should be clear and easy to understand. It should represent the action that the button performs.
Position: Floating buttons should be positioned in the bottom-right corner of the screen. This is the most visible and accessible location for a floating button.
Animation: Floating buttons can be animated to make them more visually appealing. For example, a floating button can bounce when it is clicked.
Best Practices for Using Floating Buttons
Here are some best practices for using floating buttons:
Only use one floating button per screen. This will help to ensure that users are not overwhelmed with options.
Use a clear and concise icon for the floating button. The icon should be easy to understand and represent the action that the button performs.
Position the floating button in the bottom-right corner of the screen. This is the most visible and accessible location for a floating button.
Use animation to make the floating button more visually appealing. For example, a floating button can bounce when it is clicked.
Conclusion
Floating buttons are a great way to promote the primary action of an app or website. They are easy to use and can be customized to fit the needs of any design. By following the best practices outlined in this blog post, you can create floating buttons that are both effective and visually appealing.
Free Source Code
Here is an example of a floating button with free source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Floating Buttons - CodingAyush</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="fab-container">
<div class="fab shadow">
<div class="fab-content">
<span class="material-icons">support_agent</span>
</div>
</div>
<div class="sub-button shadow">
<a href="google.com" target="_blank">
<span class="material-icons">phone</span>
</a>
</div>
<div class="sub-button shadow">
<a href="google.com" target="_blank">
<span class="material-icons">mail_outline</span>
</a>
</div>
<div class="sub-button shadow">
<a href="google.com" target="_blank">
<span class="material-icons">language</span>
</a>
</div>
<div class="sub-button shadow">
<a href="google.com" target="_blank">
<span class="material-icons">help_outline</span>
</a>
</div>
</div>
</body>
</html>
body{
background-color: #11131e;
}
.fab-container {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
user-select: none;
position: absolute;
bottom: 30px;
right: 30px;
}
.fab-container:hover {
height: 100%;
}
.fab-container:hover .sub-button:nth-child(2) {
transform: translateY(-80px);
}
.fab-container:hover .sub-button:nth-child(3) {
transform: translateY(-140px);
}
.fab-container:hover .sub-button:nth-child(4) {
transform: translateY(-200px);
}
.fab-container:hover .sub-button:nth-child(5) {
transform: translateY(-260px);
}
.fab-container:hover .sub-button:nth-child(6) {
transform: translateY(-320px);
}
.fab-container .fab {
position: relative;
height: 70px;
width: 70px;
background-color: #4ba2ff;
border-radius: 50%;
z-index: 2;
}
.fab-container .fab::before {
content: " ";
position: absolute;
bottom: 0;
right: 0;
height: 35px;
width: 35px;
background-color: inherit;
border-radius: 0 0 10px 0;
z-index: -1;
}
.fab-container .fab .fab-content {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
border-radius: 50%;
}
.fab-container .fab .fab-content .material-icons {
color: white;
font-size: 48px;
}
.fab-container .sub-button {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
bottom: 10px;
right: 10px;
height: 50px;
width: 50px;
background-color: #4ba2ff;
border-radius: 50%;
transition: all 0.3s ease;
}
.fab-container .sub-button:hover {
cursor: pointer;
}
.fab-container .sub-button .material-icons {
color: white;
padding-top: 6px;
}