<div class="demo">
<button class="btn btn--small">Small Button</button>
<button class="btn btn--medium">Medium Button</button>
<button class="btn btn--large">Large Button</button>
<button class="btn btn--undefined btn--light">Large Button</button>
<button class="btn btn--undefined btn--cta" data-label="Call To Action Button">Call To Action Button</button>
</div>
<div class="demo demo--inverted">
<button class="btn btn--small btn--inverted">Small Button inverted</button>
<button class="btn btn--medium btn--inverted">Medium Button inverted</button>
<button class="btn btn--large btn--inverted">Large Button inverted</button>
<button class="btn btn--undefined btn--light btn--inverted">Large Button inverted</button>
</div>
import { Fragment } from 'complate-stream'
import Button from "./components/01-atoms/form/button/index.jsx";
<Fragment>
<div class="demo">
<Button size="small">Small Button</Button>
<Button size="medium">Medium Button</Button>
<Button size="large">Large Button</Button>
<Button light>Large Button</Button>
<Button cta>Call To Action Button</Button>
</div>
<div class="demo demo--inverted">
<Button size="small" inverted>Small Button inverted</Button>
<Button size="medium" inverted>Medium Button inverted</Button>
<Button size="large" inverted>Large Button inverted</Button>
<Button light inverted>Large Button inverted</Button>
</div>
</Fragment>
/* No context defined for this component. */
//
// Button
//
$default-btn-margin: $spacer-sm;
.btn {
@extend %base-button;
@extend %heading-font-bold;
@include hover-fill($brand-interaction, $button-color, $button-color);
margin-bottom: $default-btn-margin;
border: 3px solid $button-border-color;
border-radius: 0;
background-color: $button-background;
padding: $spacer-md $spacer-base;
line-height: $button-medium-line-height;
font-size: $button-medium-font-size;
&--cta {
border-color: $button-cta-border-color;
background-color: $button-cta-background;
color: $button-cta-color;
&::before {
position: absolute;
z-index: 1;
content: attr(data-label);
}
&::after {
z-index: 0;
background-color: $button-cta-hover-background;
}
&:hover,
&:focus {
border-color: $button-cta-hover-border-color;
color: $button-cta-color;
&::after {
width: 100%;
}
}
}
&--light {
border-width: 0 0 3px;
background-color: transparent;
padding: $spacer-xs 0;
}
&--small {
padding: $spacer-sm $spacer-md;
line-height: $button-small-line-height;
font-size: $button-small-font-size;
}
&--condensed {
padding: $spacer-xs $spacer-sm;
line-height: $button-small-line-height;
font-size: $button-small-font-size;
}
&--large {
padding: $spacer-md $spacer-lg;
line-height: $button-large-line-height;
font-size: $button-large-font-size;
}
&--inverted {
@include hover-fill($brand-interaction, $button-inverted-color, $button-inverted-color);
border-color: $button-inverted-border-color;
color: $button-inverted-color;
}
&--icon {
border: 0;
background-color: transparent;
padding: $spacer-xxs;
}
& + .btn {
margin-left: $default-btn-margin;
}
}
import { createElement } from 'complate-stream'
import classNames from 'classnames'
export default function Button ({ size, inverted, cta, light, href }, ...children) {
let buttonClass = classNames(`btn btn--${size}`, { 'btn--light': light }, { 'btn--inverted': inverted }, { 'btn--cta': cta })
let label
if (cta) {
label = children.join('')
}
return href ? <a href={href} class={buttonClass} data-label={label}>{children}</a>
: <button class={buttonClass} data-label={label}>{children}</button>
}
Idee für Button Transitions hier: Tympanus