@syncfusion/react-buttons/styles/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-btn {
  border: 1px solid;
  letter-spacing: var(--sf-letter-spacing-wide);
  cursor: pointer;
  position: relative;
  justify-content: center;
  display: inline-flex;
  text-align: center;
  user-select: none;
  white-space: nowrap;
  font-weight: var(--sf-font-weight-medium);
}
.sf-btn.sf-btn-me svg {
  font-size: var(--sf-font-size-base);
}
.sf-btn.sf-btn-la svg {
  font-size: var(--sf-font-size-xl);
}
.sf-btn.sf-btn-sm svg {
  font-size: var(--sf-font-size-base);
}
.sf-btn-vertical {
  flex-direction: column;
  padding: var(--sf-spacing-8) var(--sf-spacing-16);
}
.sf-btn-la:not(.sf-icon-btn) {
  gap: var(--sf-spacing-12);
}
.sf-btn-sm:not(.sf-icon-btn) {
  gap: var(--sf-spacing-8);
}
.sf-btn-me:not(.sf-icon-btn) {
  gap: var(--sf-spacing-10);
}
.sf-btn-la:not(.sf-icon-btn):not(.sf-btn-vertical) {
  padding: var(--sf-spacing-11) var(--sf-spacing-24);
}
.sf-btn-sm:not(.sf-icon-btn):not(.sf-btn-vertical) {
  padding: var(--sf-spacing-5) var(--sf-spacing-12);
}
.sf-btn-me:not(.sf-icon-btn):not(.sf-btn-vertical) {
  padding: var(--sf-spacing-9) var(--sf-spacing-16);
}
.sf-btn svg {
  display: block;
}
.sf-btn:hover, .sf-btn:focus {
  text-decoration: none;
}
.sf-icon-btn.sf-icon-btn-sm {
  padding: var(--sf-spacing-7);
}
.sf-icon-btn.sf-icon-btn-me {
  padding: var(--sf-spacing-11);
}
.sf-icon-btn.sf-icon-btn-la {
  padding: var(--sf-spacing-13);
}
.sf-btn-sm:not(.sf-btn-vertical) {
  line-height: var(--sf-line-height-sm);
}
.sf-btn-me:not(.sf-btn-vertical) {
  line-height: var(--sf-line-height-sm);
}
.sf-btn-la:not(.sf-btn-vertical) {
  line-height: var(--sf-line-height-base);
}
.sf-rtl.sf-btn-top {
  flex-direction: column-reverse;
}
.sf-rtl.sf-btn-bottom {
  flex-direction: column;
}
.sf-btn {
  color: rgb(var(--sf-color-on-surface));
}
.sf-btn:active {
  box-shadow: var(--sf-elevation-1);
}
.sf-btn-primary {
  background: rgb(var(--sf-color-primary));
  border-color: rgb(var(--sf-color-primary));
  color: rgb(var(--sf-color-on-primary));
}
.sf-btn-primary:hover {
  background: rgb(var(--sf-color-primary), 0.8);
  box-shadow: var(--sf-elevation-2);
}
.sf-btn-primary:focus {
  outline: rgb(var(--sf-color-white)) 0 solid;
}
.sf-btn-primary:focus-visible {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000;
  background: rgb(var(--sf-color-primary), 0.8);
}
.sf-btn-primary.sf-active, .sf-btn-primary:active {
  background: rgb(var(--sf-color-primary), 12);
  box-shadow: var(--sf-elevation-1);
}
.sf-btn-outlined {
  background: transparent;
}
.sf-btn-outlined:hover {
  background: rgb(var(--sf-color-primary), 0.1);
  border-color: rgb(var(--sf-color-outline));
  box-shadow: none;
}
.sf-btn-outlined:focus {
  background: rgb(var(--sf-color-primary), 0.1);
  border: 1px solid rgb(var(--sf-color-outline));
}
.sf-btn-outlined:focus-visible {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000;
  background: rgb(var(--sf-color-primary), 0.1);
}
.sf-btn-outlined.sf-active, .sf-btn-outlined:active {
  background: rgb(var(--sf-color-primary), 0.1);
  box-shadow: none;
}
.sf-btn-standard {
  background: transparent;
  border-color: transparent;
}
.sf-btn-standard:hover {
  background: rgb(var(--sf-color-primary), 0.1);
  box-shadow: none;
}
.sf-btn-standard:focus {
  background: rgb(var(--sf-color-primary), 0.1);
}
.sf-btn-standard:focus-visible {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000;
  background: rgb(var(--sf-color-primary), 0.1);
}
.sf-btn-standard:active, .sf-btn-standard.sf-active {
  box-shadow: none;
  background: rgb(var(--sf-color-primary), 0.1);
}
.sf-btn-primary.sf-btn-standard, .sf-btn-primary.sf-btn-outlined {
  color: rgb(var(--sf-color-primary));
}
.sf-btn-secondary {
  background-color: rgb(var(--sf-color-surface), 0.1);
}
.sf-btn-secondary:focus-visible {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000;
}
.sf-btn-secondary:active, .sf-btn-secondary.sf-active {
  background: rgb(var(--sf-color-on-surface), 0.1);
}
.sf-btn-secondary.sf-btn-standard:active, .sf-btn-secondary.sf-btn-standard.sf-active {
  background: rgba(var(--sf-color-on-surface), 0.12);
  box-shadow: none;
}
.sf-btn-secondary.sf-btn-filled:hover {
  box-shadow: var(--sf-elevation-2);
  background: rgb(var(--sf-color-on-surface), 0.1);
}
.sf-btn-secondary.sf-btn-filled:active, .sf-btn-secondary.sf-btn-filled.sf-active {
  box-shadow: var(--sf-elevation-1);
}
.sf-btn-success {
  color: rgb(var(--sf-color-success));
}
.sf-btn-success:hover {
  background: rgb(var(--sf-color-success), 0.25);
}
.sf-btn-success:focus {
  background: rgb(var(--sf-color-success), 0.25);
}
.sf-btn-success:focus-visible {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000;
}
.sf-btn-success:active, .sf-btn-success.sf-active {
  background: rgb(var(--sf-color-success), 0.1);
  box-shadow: none;
}
.sf-btn-success.sf-btn-outlined {
  border-color: rgb(var(--sf-color-success));
}
.sf-btn-success.sf-btn-outlined.sf-active, .sf-btn-success.sf-btn-outlined:active {
  background: rgb(var(--sf-color-success), 0.1);
}
.sf-btn-success.sf-btn-filled {
  color: rgb(var(--sf-color-on-primary));
  background: rgb(var(--sf-color-success));
  border-color: rgb(var(--sf-color-success));
}
.sf-btn-success.sf-btn-filled:hover {
  background: rgb(var(--sf-color-success), 0.8);
  color: rgb(var(--sf-color-success-text));
  box-shadow: var(--sf-elevation-2);
}
.sf-btn-success.sf-btn-filled:focus {
  background: rgb(var(--sf-color-success), 0.8);
}
.sf-btn-success.sf-btn-filled.sf-active, .sf-btn-success.sf-btn-filled:active {
  background: rgb(var(--sf-color-success), 12);
  box-shadow: var(--sf-elevation-1);
}
.sf-btn-info {
  color: rgb(var(--sf-color-info));
}
.sf-btn-info:hover {
  background: rgb(var(--sf-color-info), 0.25);
}
.sf-btn-info:focus {
  background: rgb(var(--sf-color-info), 0.25);
}
.sf-btn-info:focus-visible {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000;
}
.sf-btn-info:active, .sf-btn-info.sf-active {
  background: rgb(var(--sf-color-info), 0.1);
  box-shadow: none;
}
.sf-btn-info.sf-btn-outlined {
  border-color: rgb(var(--sf-color-info));
}
.sf-btn-info.sf-btn-outlined.sf-active, .sf-btn-info.sf-btn-outlined:active {
  background: rgb(var(--sf-color-info), 0.1);
}
.sf-btn-info.sf-btn-filled {
  color: rgb(var(--sf-color-on-primary));
  background: rgb(var(--sf-color-info));
  border-color: rgb(var(--sf-color-info));
}
.sf-btn-info.sf-btn-filled:hover {
  background: rgb(var(--sf-color-info), 0.8);
  color: rgb(var(--sf-color-info-text));
  box-shadow: var(--sf-elevation-2);
}
.sf-btn-info.sf-btn-filled:focus {
  background: rgb(var(--sf-color-info), 0.8);
}
.sf-btn-info.sf-btn-filled.sf-active, .sf-btn-info.sf-btn-filled:active {
  background: rgb(var(--sf-color-info), 12);
  box-shadow: var(--sf-elevation-1);
}
.sf-btn-warning {
  color: rgb(var(--sf-color-warning));
}
.sf-btn-warning:hover {
  background: rgb(var(--sf-color-warning), 0.25);
}
.sf-btn-warning:focus {
  box-shadow: none;
  background: rgb(var(--sf-color-warning), 0.25);
}
.sf-btn-warning:focus-visible {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000;
}
.sf-btn-warning.sf-active, .sf-btn-warning:active {
  background: rgb(var(--sf-color-warning), 0.1);
  box-shadow: none;
}
.sf-btn-warning.sf-btn-outlined {
  border-color: rgb(var(--sf-color-warning));
}
.sf-btn-warning.sf-btn-outlined.sf-active, .sf-btn-warning.sf-btn-outlined:active {
  background: rgb(var(--sf-color-warning), 0.1);
}
.sf-btn-warning.sf-btn-filled {
  color: rgb(var(--sf-color-on-primary));
  background: rgb(var(--sf-color-warning));
  border-color: rgb(var(--sf-color-warning));
}
.sf-btn-warning.sf-btn-filled:hover {
  background: rgb(var(--sf-color-warning), 0.8);
  color: rgb(var(--sf-color-warning-text));
  box-shadow: var(--sf-elevation-2);
}
.sf-btn-warning.sf-btn-filled:focus {
  background: rgb(var(--sf-color-warning), 0.8);
}
.sf-btn-warning.sf-btn-filled.sf-active, .sf-btn-warning.sf-btn-filled:active {
  background: rgb(var(--sf-color-warning), 12);
  box-shadow: var(--sf-elevation-1);
}
.sf-btn-error {
  color: rgb(var(--sf-color-error));
}
.sf-btn-error:hover {
  background: rgb(var(--sf-color-error), 0.25);
}
.sf-btn-error:focus {
  background: rgb(var(--sf-color-error), 0.25);
}
.sf-btn-error:focus-visible {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000;
}
.sf-btn-error:active, .sf-btn-error.sf-active {
  background: rgb(var(--sf-color-error), 0.1);
  box-shadow: none;
}
.sf-btn-error.sf-btn-outlined {
  border-color: rgb(var(--sf-color-error));
}
.sf-btn-error.sf-btn-outlined.sf-active, .sf-btn-error.sf-btn-outlined:active {
  background: rgb(var(--sf-color-error), 0.1);
}
.sf-btn-error.sf-btn-filled {
  color: rgb(var(--sf-color-on-primary));
  background: rgb(var(--sf-color-error));
  border-color: rgb(var(--sf-color-error));
}
.sf-btn-error.sf-btn-filled:hover {
  background: rgb(var(--sf-color-error), 0.8);
  color: rgb(var(--sf-color-error-text));
  box-shadow: var(--sf-elevation-2);
}
.sf-btn-error.sf-btn-filled:focus {
  background: rgb(var(--sf-color-error), 0.8);
}
.sf-btn-error.sf-btn-filled.sf-active, .sf-btn-error.sf-btn-filled:active {
  background: rgb(var(--sf-color-error), 12);
  box-shadow: var(--sf-elevation-1);
}
.sf-btn:disabled {
  background: transparent;
  border-color: rgba(var(--sf-color-secondary), 0.12);
  color: rgba(var(--sf-color-on-surface), 0.38);
  pointer-events: none;
  box-shadow: none;
}
.sf-btn-link:hover {
  text-decoration: underline;
}