hexo-theme-async/source/css/_components/btn.less

🎈 A simple, lightweight Hexo theme

.trm-btn {
	white-space: nowrap;
	background-color: var(--primary, #afb42b);
	height: 45px;
	border: solid 2px var(--primary, #afb42b);
	color: #fcfcfe;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	border-radius: 30px;
	display: inline-flex;
	padding: 0 35px;
	justify-content: center;
	align-items: center;
	.transition-mixin();

	svg,
	i {
		margin-left: 10px;
	}

	.arrow-right {
		margin-left: 10px;
		.transition-mixin();
	}

	.arrow-left {
		margin-right: 10px;
		.transition-mixin();
	}

	&.trm-btn-sm {
		height: 40px;
		padding: 0 25px;
	}

	&:hover {
		transform: scale(1.03);
		color: #fcfcfe;
		background-color: var(--primary-weak, #afb42b);
		border: solid 2px var(--primary-weak, #afb42b);

		.arrow-right {
			transform: translateX(5px);
		}

		.arrow-left {
			transform: translateX(-5px);
		}
	}

	&.trm-btn-border {
		border: solid 2px #fcfcfe;
		background-color: transparent;

		&:hover {
			border: solid 2px #fcfcfe;
			background-color: transparent;
		}
	}

	&.trm-btn-circle {
		padding: 0;
		width: 45px;
		border-radius: 50%;

		&.trm-btn-sm {
			width: 40px;
		}

		svg,
		i {
			font-size: 13px;
			margin: 0;
		}
	}

	&:focus {
		outline: inherit;
	}
}