CSS Project: Crafting a Pure CSS Animated Custom Animated Floating Action Button (FAB)

Written by

FixTechToday

in

In the dynamic world of web design, user experience reigns supreme. One of the key elements contributing to a great user experience is intuitive navigation and clear calls to action. The Floating Action Button (FAB) is a prominent design pattern that elegantly addresses these needs. Positioned typically in a corner of the screen, the FAB provides a readily accessible, visually striking button to trigger primary actions. In this comprehensive guide, we’ll delve into crafting a pure CSS animated FAB. This project is ideal for beginners and intermediate CSS enthusiasts looking to sharpen their skills and create engaging, interactive elements. We’ll explore the underlying principles, step-by-step instructions, potential pitfalls, and best practices to help you build a FAB that not only looks great but also enhances usability.

Understanding the Floating Action Button (FAB)

Before we dive into the code, let’s understand what a FAB is and why it’s so popular. A FAB is a circular button that floats above the other content on a screen. Its primary purpose is to represent the most important action a user can take on a particular screen. Think of it as a direct path to the most critical task. You’ll often see it used for actions like “Compose” (in email apps), “Add” (in to-do lists), or “Create” (in various content creation platforms).

Here are some key characteristics and benefits of using a FAB:

  • Prominent Visibility: It stands out from the rest of the UI, drawing the user’s attention.
  • Clear Action: It clearly signals the primary action available.
  • Accessibility: It’s usually easily accessible, making it easier for users to perform core tasks.
  • Contextual Relevance: It can change based on the user’s current context, offering relevant actions.

Project Setup: HTML Structure

Our project starts with the HTML structure. We’ll keep it simple and semantic. The core element will be a `button` element, which will be styled to look like a FAB. We’ll also add a container div to help with positioning. Here’s the basic HTML:

<div class="fab-container">
 <button class="fab">
 <span class="fab-icon">+</span>
 </button>
</div>

Let’s break down each part:

  • <div class="fab-container">: This is the container for our FAB. We’ll use this to position the FAB on the screen.
  • <button class="fab">: This is our FAB itself. We’re using a button element because it’s semantically correct for an action.
  • <span class="fab-icon">+</span>: This is the plus sign icon. We’ll style it to be centered inside the button. You can replace the “+” with any other icon (using an icon font or an SVG).

CSS Styling: Making it Beautiful

Now, let’s get into the CSS. We’ll start with the container and then style the button itself. We’ll also add a basic animation to make it more appealing. Add the following CSS to your stylesheet or inside a <style> tag in your HTML file.


.fab-container {
 position: fixed;
 bottom: 20px;
 right: 20px;
 z-index: 1000; /* Ensure it's on top of other elements */
}

.fab {
 width: 56px;
 height: 56px;
 border-radius: 50%; /* Makes it a circle */
 background-color: #4CAF50; /* A nice green color */
 color: white;
 border: none;
 outline: none;
 cursor: pointer;
 box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12); /* Subtle shadow */
 font-size: 24px;
 font-weight: bold;
 display: flex;
 justify-content: center;
 align-items: center;
 transition: transform 0.2s ease-in-out; /* For the hover effect */
}

.fab:hover {
 transform: scale(1.1); /* Slightly enlarge on hover */
}

.fab-icon {
 /* You can add more styling here for the icon, e.g., font-size, line-height */
}

Let’s break down the CSS:

  • .fab-container: We use position: fixed to position the FAB relative to the viewport. bottom: 20px and right: 20px place it in the bottom-right corner. z-index: 1000 ensures it stays on top.
  • .fab: We set the width, height, and border-radius to create a circle. We set a background color, text color, and remove the border and outline. The box-shadow adds a subtle depth effect. display: flex, justify-content: center, and align-items: center center the content (the plus sign) within the button. The transition property creates a smooth hover effect.
  • .fab:hover: On hover, the button scales up slightly.
  • .fab-icon: This is where you can style the icon inside the button.

Adding Animation: Enhancing Interactivity

Now for the fun part: animation! We’ll add a simple animation to make the FAB more engaging. Let’s add an animation that changes the icon on click. We’ll use CSS keyframes and toggle a class on the button.

First, add the following CSS keyframes:


@keyframes rotate {
 from {
 transform: rotate(0deg);
 }
 to {
 transform: rotate(45deg);
 }
}

@keyframes unrotate {
 from {
 transform: rotate(45deg);
 }
 to {
 transform: rotate(0deg);
 }
}

These keyframes define the rotation animation. The “rotate” animation rotates the icon from 0 to 45 degrees, and “unrotate” does the opposite.

Next, we add the class and style the button:


.fab.active .fab-icon {
 animation: rotate 0.2s ease-in-out forwards;
}

.fab.inactive .fab-icon {
 animation: unrotate 0.2s ease-in-out forwards;
}

Now, let’s add some JavaScript to toggle these classes:


const fab = document.querySelector('.fab');

fab.addEventListener('click', () => {
 fab.classList.toggle('active');
 fab.classList.toggle('inactive');
});

This JavaScript code adds a click event listener to the FAB. When the button is clicked, it toggles the “active” and “inactive” classes. This will trigger the rotation animation on the icon.

Advanced Animation: Expanding FAB

Let’s take it a step further and create an expanding FAB. When the user clicks the FAB, it will expand to reveal additional options. We will need to adjust the HTML and CSS for this.

Modify the HTML to include the expanded menu:


<div class="fab-container">
 <button class="fab">
 <span class="fab-icon">+</span>
 </button>
 <div class="fab-options">
 <a href="#" class="fab-option">Option 1</a>
 <a href="#" class="fab-option">Option 2</a>
 <a href="#" class="fab-option">Option 3</a>
 </div>
</div>

Here, we’ve added a <div class="fab-options"> that will hold our options. Inside, we have three example options, each represented by an <a> tag. You can replace these with your own links or buttons.

Now, let’s add the CSS for the expanding FAB:


.fab-options {
 position: absolute;
 bottom: 70px; /* Position options above the FAB */
 right: 0; /* Align to the right */
 display: none;
 flex-direction: column;
 align-items: flex-end;
}

.fab-option {
 background-color: #673ab7; /* A different color */
 color: white;
 text-decoration: none;
 padding: 10px 15px;
 border-radius: 20px;
 margin-bottom: 10px;
 display: inline-block;
 opacity: 0; /* Initially hidden */
 transform: translateY(20px); /* Move them down */
 transition: all 0.2s ease-in-out;
}

.fab-option:hover {
 background-color: #512da8;
}

.fab-container.active .fab-options {
 display: flex;
}

.fab-container.active .fab-option {
 opacity: 1;
 transform: translateY(0);
}

.fab-container.active .fab {
 transform: rotate(45deg); /* Rotate the FAB on click */
}

/* Add a slight delay for each option's animation */
.fab-container.active .fab-option:nth-child(1) {
 transition-delay: 0.1s;
}

.fab-container.active .fab-option:nth-child(2) {
 transition-delay: 0.2s;
}

.fab-container.active .fab-option:nth-child(3) {
 transition-delay: 0.3s;
}

Let’s break down the CSS changes:

  • .fab-options: This positions the options above the FAB, initially hidden. We use flex-direction: column to stack the options vertically, and align-items: flex-end to align them to the right.
  • .fab-option: Styles the individual options, initially hidden with opacity: 0 and moved down with transform: translateY(20px). We added a hover state and basic styling.
  • .fab-container.active .fab-options: When the container has the “active” class, the options are displayed.
  • .fab-container.active .fab-option: When the container has the “active” class, the options fade in and move up to their original position.
  • .fab-container.active .fab: Rotates the FAB when active.
  • .fab-container.active .fab-option:nth-child(X): Adds a delay to each option’s animation, creating a cascading effect.

Finally, update the JavaScript to toggle the “active” class on the container:


const fabContainer = document.querySelector('.fab-container');
const fab = document.querySelector('.fab');

fab.addEventListener('click', () => {
 fabContainer.classList.toggle('active');
});

This revised JavaScript now targets the container and toggles the “active” class, triggering the expanding animation.

Common Mistakes and Troubleshooting

Even with clear instructions, you might run into some common issues. Here’s a troubleshooting guide:

  • Incorrect Positioning: Double-check your position properties. Make sure the container has position: fixed and that you’re using bottom and right (or left) to position it correctly.
  • Z-index Issues: If your FAB is hidden behind other elements, increase the z-index value in the .fab-container CSS.
  • Animation Not Working: Verify that you have correctly added the JavaScript to toggle the classes. Also, ensure that your CSS keyframes are correctly defined and that the animation properties (animation and transition) are set up properly.
  • Icon Not Centered: Make sure you’re using display: flex, justify-content: center, and align-items: center on the .fab class to center the icon.
  • Expanding FAB Not Working: Check that the .fab-options are initially hidden (display: none). Ensure the parent container has the correct active class toggled. Verify the animation delays are set correctly.
  • Browser Compatibility: While CSS transitions and animations are widely supported, always test your FAB in different browsers (Chrome, Firefox, Safari, Edge) to ensure consistent behavior.

SEO Best Practices

While the FAB itself is a UI element, consider these SEO tips for the surrounding content:

  • Keyword Integration: Naturally incorporate relevant keywords related to your website’s primary actions (e.g., “subscribe,” “contact us,” “add to cart”) in the text around the FAB.
  • Descriptive Alt Text: If your FAB uses an image or SVG, always include descriptive alt text for accessibility and SEO.
  • Mobile-First Design: Ensure your FAB functions well on mobile devices. Consider its size and placement for touch interactions.
  • Page Speed: Optimize images and CSS to minimize loading times. A slow-loading FAB can negatively impact user experience and SEO.

Key Takeaways

  • Structure Matters: A clean HTML structure is the foundation of a good FAB.
  • CSS for Style: Use CSS to style the FAB, making it visually appealing and interactive.
  • Animation Enhances: CSS animations can make your FAB more engaging.
  • JavaScript for Interaction: Use JavaScript to handle user interactions and trigger animations.
  • Test Thoroughly: Test your FAB on different devices and browsers.

Optional FAQ

Here are some frequently asked questions about creating a CSS FAB:

  1. Can I use an image instead of an icon? Yes, you can. Instead of a text icon, you can use an <img> tag or an SVG inside the FAB button. Remember to adjust the CSS to center the image correctly.
  2. How can I customize the FAB’s color and shape? Modify the background-color, border-radius, and other CSS properties in the .fab class to change the appearance.
  3. How do I handle the FAB on mobile devices? Ensure the FAB is responsive. Use media queries in your CSS to adjust its size and position on smaller screens. Consider touch target sizes for easy interaction.
  4. Can I add more complex animations? Absolutely! You can use CSS transitions, animations, and even libraries like GreenSock (GSAP) to create more elaborate effects.
  5. How do I make the FAB disappear on scroll? You can use JavaScript to detect the scroll position and dynamically hide or show the FAB. Use CSS transitions to make the hiding/showing smooth.

By following these steps, you can create a functional and visually appealing Floating Action Button using pure CSS. Remember to experiment with different animations and styles to find the perfect fit for your project. This project is a great way to improve your CSS skills and add a modern, interactive element to your websites.

More posts