スタイルとバリエーションを備えた Flexbox ボタン

Link  Button 
Primary
 Button text Button text Button text Button text  
Secondary
 Button text Button text Button text Button text  
Tertiary
 Button text Button text Button text Button text  
Width modifier
 Categories Categories Categories 
Disabled
 Button text Button text Button text 
Status
   

/* ---------------------------------------------------------- */ /* Snippflow Button */ /* ---------------------------------------------------------- */ .sf-button { --sf-button-gap: 8px; --sf-button-padding-top: 12px; --sf-button-padding-bottom: 12px; --sf-button-padding-left: 16px; --sf-button-padding-right: 16px; --sf-button-border-radius: 8px; --sf-button-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); --sf-button-primary-color: #fff; --sf-button-primary-bg: #46a787; --sf-button-primary-border: #3f9b7d; --sf-button-primary-hover-color: #fff; --sf-button-primary-hover-bg: #3c9376; --sf-button-primary-hover-border: #378c70; --sf-button-secondary-color: #121924; --sf-button-secondary-bg: #F8F8F9; --sf-button-secondary-border: #cbd5e1; --sf-button-secondary-hover-color: #121924; --sf-button-secondary-hover-bg: #fff; --sf-button-secondary-hover-border: #cbd5e1; --sf-button-tertiary-color: #121924; --sf-button-tertiary-bg: transparent; --sf-button-tertiary-border: transparent; --sf-button-tertiary-hover-color: #121924; --sf-button-tertiary-hover-bg: #e0e5ea; --sf-button-tertiary-hover-border: transparent; --sf-button-tertiary-status: #c82020; } a.sf-button, input[type="submit"].sf-button, input[type="reset"].sf-button, input[type="button"].sf-button, button.sf-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--sf-button-gap); position: relative; box-sizing: border-box; font-size: inherit; font-weight: 500; line-height: 1; padding: var(--sf-button-padding-top) var(--sf-button-padding-right) var(--sf-button-padding-bottom) var(--sf-button-padding-left); border: 1px solid; border-radius: var(--sf-button-border-radius); white-space: nowrap; outline: unset; text-decoration: none; cursor: pointer; transition: all 0.3s ease-in-out; &[aria-expanded="true"], &:hover { text-decoration: none; } /* Is fit (100%)*/ &.is-fit { width: 100%; } /* + Is fit margin */ & + .is-fit { margin-top: 10px; /* btn under other is-fit btm */ } /* Has status */ &.has-status { :after { content: ""; display: block; width: 8px; height: 8px; border-radius: 100%; background-color: var(--sf-button-tertiary-status); position: absolute; right: 5px; top: 5px; animation: sp-status-pulse 1s infinite ease-in-out alternate; } } /* Is disabled */ &.disabled, &:disabled, &[aria-disabled="true"] { cursor: default; filter: saturate(0%); opacity: .7; background: transparent; transform: none; box-shadow: none; outline: none; &:hover { color: initial; pointer-events: none; } } /* Icon */ & > i { min-width: 18px; font-style: normal; text-align: center; } /* Has only icon */ &.has-only-icon { padding: var(--sf-button-padding-top); } /* Primary button */ &.is-primary { color: var(--sf-button-primary-color); background-color: var(--sf-button-primary-bg); border-color: var(--sf-button-primary-border); box-shadow: var(--sf-button-box-shadow); &:hover:not(:disabled) { color: var(--sf-button-primary-color); background-color: var(--sf-button-primary-hover-bg); border-color: var(--sf-button-primary-hover-border); } } /* Secondary button */ &.is-secondary { color: var(--sf-button-secondary-color); background-color: var(--sf-button-secondary-bg); border-color: var(--sf-button-secondary-border); box-shadow: var(--sf-button-box-shadow); &:hover:not(:disabled) { color: var(--sf-button-secondary-color); background-color: var(--sf-button-secondary-hover-bg); border-color: var(--sf-button-secondary-hover-border); } } /* Tertiary button */ &.is-tertiary { color: var(--sf-button-tertiary-color); background-color: var(--sf-button-tertiary-bg); border-color: var(--sf-button-tertiary-border); &:hover:not(:disabled) { color: var(--sf-button-tertiary-color); background-color: var(--sf-button-tertiary-hover-bg); border-color: var(--sf-button-tertiary-hover-border); } } } @keyframes sp-status-pulse { from { transform: scale(0.8); } to { transform: scale(1.1); } }