Buttons

Default

This is the Default Button, which means there is no modifier applied, it is mainly used to reset the browser button style and adding an different hover and focus effect. This button can also be used if you want a button but don't want any styling.

<button class="btn">
	<span class="btn__item">
		Default
	</span>
</button>

<button class="btn">
	<span class="btn__item btn__item--border-bottom">
		Default
	</span>
</button>

<button class="btn">
	<span class="btn__item">
		Text with Icon
	</span>
	<span class="icon btn__item btn__icon">
		<svg>
		</svg>
	</span>
</button>

<button class="btn">
	<span class="icon btn__item btn__icon">
		<svg>
		</svg>
	</span>
</button>

Notes

You can use the modifier --border-bottom to lock the focus event. Every item in the button must be wrapped with the btn__item class, so display: flex inside the button works reliable. If you add a icon to the the button it has to have the btn__item and btn__icon class.

Primary

This is the primary button and should always be used to indicate a certain action (f.e adding a List to the user).

<button class="btn btn--primary">
	<span class="btn__item">Invite some Friends</span>
</button>

Notes

This button should not be used with Icons.

Icon Buttons

Add a modifier to the button icon and you get a floating icon.

<button class="btn">
	<span class="btn__item">With Text</span>
	<span class="icon btn__item btn__icon btn__icon--floating">
		<svg>
		</svg>
	</span>
</button>

<button class="btn">
	<span class="icon btn__item btn__icon btn__icon--floating">
		<svg>
		</svg>
	</span>
</button>

Notes

This should be used, when there is no label in the button. You should also use this instead of the primary button when you want to use an icon in the button.

SCSS

@mixin border-bottom {
	&:after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		animation: show-border-bottom ease 0.4s;
		width: 100%;
		height: 4px;
		background: $primary;
	}
}

@keyframes show-border-bottom {
	0% {
		transform: scaleX(0);
	}
	100% {
		transform: scaleX(1);
	}
}

.btn {
	background: none;
	border: none;
	font-weight: bold;
	display: flex;
	align-items: center;
	&:focus {
		outline: none;
	}

	&:focus, &:hover {
		.btn__item:not(.btn__icon) {
			@include border-bottom();
		}
		.btn__icon--floating {
			background: $secondary;
		}
		.btn__icon:not(.btn__icon--floating) {
			color: $primary;
		}
	}

	&--primary {
		background: $primary;
		color: #fff;
		padding: em(8) em(24);
		border-radius: em(40);
		transition: background 0.4s ease;
		box-shadow: $box-shadow-1;
		&:focus {
			outline: none;
		}
		&:hover, &:focus {
			background: $secondary;
			.btn__item {
				&:after {
					display: none;
				}
			}
		}
	}

	&__icon {
		&--floating {
			color: #fff;
			background: $primary;
			width: 44px;
			height: 44px;
			font-size: 18px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 100%;
			transition: background 0.4s ease;
		}
	}

	&__item {
		position: relative;
		transition: all 0.4s ease;
		&--border-bottom {
			@include border-bottom();
		}
	}

	&__item:nth-child(2) {
		margin-left: em(10);
	}
}