Floating Buttons Tutorial

Introduction

• Floating buttons remain fixed in place on a webpage, even when scrolling or resizing the browser.
• They can be used for various interactions, like social media links, chat options, or subscription forms.
• This tutorial focuses on creating a mini navigation menu with three options:
  • Call option
  • Email address icon
  • Chat option

Overview of the Floating Button

• Example of the finished floating button with three small icons.
• Hover animation reveals the three icons.
• Icons can be linked to various pages using anchor tags.

HTML Structure

1. Link Material Icons - Required for the icons used.
2. Floating Container - A div with class floating-container to hold all elements:
   • Main button named floating-button.
   • Element container to hold individual icons.
   • Each icon represented as a span with class float-element.

CSS Styling

Basic Styling

• Link Roboto font family.
• Set position: fixed for the floating container, with width and height properties.
• Position the container at the bottom right corner with bottom: 0 and right: 0.
• Add margin for spacing.

Hover Effects

• On hover, increase the height of the floating container by 300px.
• Apply transformations to the floating button (box shadow and translate transformation).
• Implement a transition effect (transition: all 0.3s).

Floating Button Style

• Set position: absolute, width, height, and background properties.
• Use border-radius: 50% to create a circular shape.
• Center the plus icon with text-align: center and line-height: 65px.
• Add transition effects and z-index for stacking order.

Styling Float Elements

• Each float element is styled as follows:
  • display: block and position: relative.
  • Circular shape with border-radius: 50%, height, and width.
  • Set opacity: 0 and cursor: pointer by default (invisible elements).
  • Different background and box shadow for each icon using nth-child selector.

Animation Effects

• Animation has four states (0%, 30%, 70%, 100%):
  • Start with opacity: 0, then transform into visible size and position.
• Elements become visible on hover with defined animation delays:
  • First element: 0.2 seconds delay
  • Second element: 0.4 seconds delay
  • Third element: 0.6 seconds delay

Conclusion

• The tutorial covers the creation of a floating button with interactive features and animations.
• Encouragement to like the video and subscribe to the channel for more content.