style.scss

.components-button {
	display: inline-flex;
	text-decoration: none;
	font-size: $default-font-size;
	margin: 0;
	border: 0;
	cursor: pointer;
	-webkit-appearance: none;
	background: none;

	&.is-button {
		padding: 0 10px 1px;
		line-height: 26px;
		height: 28px;
		border-radius: 3px;
		white-space: nowrap;
		border-width: $border-width;
		border-style: solid;
	}

	// Default button style
	&.is-default {
		color: #555;
		border-color: #ccc;
		background: #f7f7f7;
		box-shadow: inset 0 -1px 0 #ccc;
		vertical-align: top;

		&:hover {
			background: #fafafa;
			border-color: #999;
			box-shadow: inset 0 -1px 0 #999;
			color: #23282d;
		}

		&:focus:enabled {
			background: #fafafa;
			color: #23282d;
			border-color: #999;
			box-shadow:
				inset 0 -1px 0 #999,
				0 0 0 2px $blue-medium-200;
		}

		&:active:enabled {
			background: #eee;
			border-color: #999;
			box-shadow: inset 0 1px 0 #999,;
		}

		&:disabled,
		&[aria-disabled="true"] {
			color: #a0a5aa;
			border-color: #ddd;
			background: #f7f7f7;
			box-shadow: none;
			text-shadow: 0 1px 0 #fff;
			transform: none;
		}
	}

	&.is-primary {
		background: color(theme(button));
		border-color: color(theme(button) shade(20%)) color(theme(button) shade(25%)) color(theme(button) shade(25%));
		box-shadow: inset 0 -1px 0 color(theme(button) shade(25%));
		color: $white;
		text-decoration: none;
		text-shadow:
			0 -1px 1px color(theme(button) shade(30%)),
			1px 0 1px color(theme(button) shade(30%)),
			0 1px 1px color(theme(button) shade(30%)),
			-1px 0 1px color(theme(button) shade(30%));

		&:hover,
		&:focus:enabled {
			background: color(theme(button) shade(5%));
			border-color: color(theme(button) shade(50%));
			color: $white;
		}

		&:hover {
			box-shadow: inset 0 -1px 0 color(theme(button) shade(50%));
		}

		&:focus:enabled {
			box-shadow:
				inset 0 -1px 0 color(theme(button) shade(50%)),
				0 0 0 2px $blue-medium-200;
		}

		&:active:enabled {
			background: color(theme(button) shade(20%));
			border-color: color(theme(button) shade(50%));
			box-shadow: inset 0 1px 0 color(theme(button) shade(50%));
			vertical-align: top;
		}

		&:disabled,
		&[aria-disabled="true"] {
			color: color(theme(button) tint(30%));
			background: color(theme(button) shade(30%));
			border-color: color(theme(button) shade(20%));
			box-shadow: none;
			text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
		}

		&.is-busy,
		&.is-busy:disabled,
		&.is-busy[aria-disabled="true"] {
			color: $white;
			background-size: 100px 100%;
			// Disable reason: This function call looks nicer when each argument is on its own line.
			/* stylelint-disable */
			background-image: linear-gradient(
				-45deg,
				theme(primary) 28%,
				color(theme(primary) shade(30%)) 28%,
				color(theme(primary) shade(30%)) 72%,
				theme(primary) 72%
			);
			/* stylelint-enable */
			border-color: color(theme(primary) shade(50%));
		}
	}

	/* Buttons that look like links, for a cross of good semantics with the visual */
	&.is-link {
		margin: 0;
		padding: 0;
		box-shadow: none;
		border: 0;
		border-radius: 0;
		background: none;
		outline: none;
		text-align: left;
		/* Mimics the default link style in common.css */
		color: #0073aa;
		text-decoration: underline;
		transition-property: border, background, color;
		transition-duration: 0.05s;
		transition-timing-function: ease-in-out;

		&:hover,
		&:active {
			color: #00a0d2;
		}

		&:focus {
			color: #124964;
			box-shadow:
				0 0 0 1px #5b9dd9,
				0 0 2px 1px rgba(30, 140, 190, 0.8);
		}
	}

	/* Link buttons that are red to indicate destructive behavior. */
	&.is-link.is-destructive {
		color: $alert-red;
	}

	&:active {
		color: currentColor;
	}

	&:disabled,
	&[aria-disabled="true"] {
		cursor: default;
		opacity: 0.3;
	}

	&:focus:enabled {
		@include button-style__focus-active;
	}

	&.is-busy {
		animation: components-button__busy-animation 2500ms infinite linear;
		background-size: 100px 100%;
		background-image: repeating-linear-gradient(-45deg, $light-gray-500, $white 11px, $white 10px, $light-gray-500 20px);
		opacity: 1;
	}

	&.is-large {
		height: 30px;
		line-height: 28px;
		padding: 0 12px 2px;
	}

	&.is-small {
		height: 24px;
		line-height: 22px;
		padding: 0 8px 1px;
		font-size: 11px;
	}

	// Buttons that are text-based.
	&.is-tertiary {
		color: theme(outlines);

		// Matches default button in hit area.
		padding: 0 10px;
		line-height: 26px;
		height: 28px;

		.dashicon {
			display: inline-block;
			flex: 0 0 auto;
		}

		// Ensure that even SVG icons that don't include the .dashicon class are colored.
		svg {
			fill: currentColor;
			outline: none;
		}

		&:active:focus:enabled {
			box-shadow: none;
		}

		&:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {
			color: color(theme(outlines) shade(25%));
		}
	}
}

@keyframes components-button__busy-animation {
	0% {
		background-position: 200px 0;
	}
}