@syncfusion/react-buttons/styles/floating-action-button/material.css

Syncfusion React Buttons package is a feature-rich collection of UI components including Button, CheckBox, RadioButton, Switch, Chip, and more for building modern, interactive React applications.

.sf-fab.sf-btn {
  align-items: center;
  display: inline-flex;
  min-height: var(--sf-spacing-40);
  min-width: var(--sf-spacing-40);
  position: absolute;
  z-index: 100000;
}
.sf-fab.sf-btn.sf-fab-fixed {
  position: fixed;
}
.sf-fab.sf-btn.sf-fab-top {
  top: var(--sf-spacing-16);
}
.sf-fab.sf-btn.sf-fab-bottom {
  bottom: var(--sf-spacing-16);
}
.sf-fab.sf-btn.sf-fab-left {
  left: var(--sf-spacing-16);
}
.sf-fab.sf-btn.sf-fab-right {
  right: var(--sf-spacing-16);
}
.sf-fab.sf-btn.sf-fab-top.sf-fab-center, .sf-fab.sf-btn.sf-fab-bottom.sf-fab-center {
  left: 50%;
  transform: translateX(-50%);
}
.sf-fab.sf-btn.sf-fab-middle.sf-fab-left, .sf-fab.sf-btn.sf-fab-middle.sf-fab-right {
  top: 50%;
  transform: translateY(-50%);
}
.sf-fab.sf-btn.sf-fab-middle.sf-fab-center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.sf-fab.sf-btn-la {
  border-radius: var(--sf-radius-16);
  gap: var(--sf-spacing-12);
}
.sf-fab.sf-btn-la:not(.sf-icon-btn):not(.sf-btn-vertical) {
  padding: var(--sf-spacing-23) var(--sf-spacing-28);
  font-size: var(--sf-font-size-2xl);
}
.sf-fab.sf-btn-la:not(.sf-btn-vertical) {
  line-height: var(--sf-line-height-2xl);
}
.sf-fab.sf-btn-la svg {
  font-size: var(--sf-font-size-3xl);
}
.sf-fab.sf-icon-btn.sf-icon-btn-la {
  padding: var(--sf-spacing-23);
}
.sf-fab.sf-btn-me {
  border-radius: var(--sf-radius-16);
  gap: var(--sf-spacing-12);
}
.sf-fab.sf-btn-me:not(.sf-icon-btn):not(.sf-btn-vertical) {
  padding: var(--sf-spacing-13) var(--sf-spacing-24);
  font-size: var(--sf-font-size-lg);
}
.sf-fab.sf-btn-me:not(.sf-btn-vertical) {
  line-height: var(--sf-line-height-lg);
}
.sf-fab.sf-btn-me svg {
  font-size: var(--sf-font-size-2xl);
}
.sf-fab.sf-icon-btn.sf-icon-btn-me {
  padding: var(--sf-spacing-15);
}
.sf-fab.sf-btn-sm {
  border-radius: var(--sf-radius-12);
  gap: var(--sf-spacing-8);
}
.sf-fab.sf-btn-sm:not(.sf-icon-btn):not(.sf-btn-vertical) {
  padding: var(--sf-spacing-9) var(--sf-spacing-16);
  font-size: var(--sf-font-size-sm);
}
.sf-fab.sf-btn-sm:not(.sf-btn-vertical) {
  line-height: var(--sf-line-height-sm);
}
.sf-fab.sf-btn-sm svg {
  font-size: var(--sf-font-size-xl);
}
.sf-fab.sf-icon-btn.sf-icon-btn-sm {
  padding: var(--sf-spacing-9);
}
.sf-rtl.sf-fab.sf-btn.sf-fab-right.sf-fab-center {
  right: 50%;
  transform: translateX(50%);
}
.sf-rtl.sf-fab.sf-btn.sf-fab-top.sf-fab-middle.sf-fab-right.sf-fab-center {
  right: 50%;
  top: 50%;
  transform: translate(50%, -50%);
}
.sf-fab-hidden {
  visibility: hidden;
}
.sf-fab {
  box-shadow: var(--sf-elevation-3);
}
.sf-fab .sf-btn:hover:not(:focus), .sf-fab .sf-btn:active, .sf-fab .sf-btn.sf-active, .sf-fab .sf-btn:disabled {
  box-shadow: var(--sf-elevation-3);
}