INFO

没有太多复杂的动画特效, 只是在普通按钮的基础上添加了一些常见的效果而言；

背景色偏移

<template>
	<div class="container">
		<button>button</button>
	</div>
</template>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

button {
	width: 140px;
	height: 60px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	outline: none;
	border: none;
	transition-duration: 1s;
	font-size: 16px;
	letter-spacing: 1px;
	position: relative;
	overflow: hidden;
	padding: 0;
	background-image: linear-gradient(
		to right,
		#eea2a2 0%,
		#bbc1bf 19%,
		#57c6e1 42%,
		#b49fda 79%,
		#7ac5d8 100%
	);
	background-size: 300%;
	background-position: right;
	transition: cubic-bezier(0.19, 1, 0.22, 1) 1s;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: bold;
	font-size: 16px;

	&:hover {
		background-position: left;
	}
}
</style>

闪动

<template>
	<div class="container">
		<button>button</button>
	</div>
</template>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

button {
	--x: 0.6;
	--y: calc(var(--x) * 2);
	width: 140px;
	height: 60px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	outline: none;
	border: none;
	font-size: 16px;
	letter-spacing: 1px;
	position: relative;
	overflow: hidden;
	padding: 0;
	transition: cubic-bezier(0.19, 1, 0.22, 1) 1s;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: bold;
	font-size: 16px;
	background-color: #1e1e1e;
	box-shadow: 0 0 10px #3b3b3b, inset 0 0 10px rgb(56, 56, 56);

	&:hover {
		animation: btn2 0.5s ease-in-out;
	}
}

@keyframes btn2 {
	0% {
		transform: scale(--var(--x), var(--y));
	}
	25% {
		transform: scale(var(--y), var(--x));
	}
	50% {
		transform: scale(--var(--x), var(--y));
	}
	75% {
		transform: scale(var(--y), var(--x));
	}
	100% {
		transform: scale(1);
	}
}
</style>

下横线

<template>
	<div class="container">
		<button>button</button>
	</div>
</template>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

button {
	width: 140px;
	height: 60px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	outline: none;
	border: none;
	font-size: 16px;
	letter-spacing: 1px;
	position: relative;
	overflow: hidden;
	padding: 0;
	transition: cubic-bezier(0.19, 1, 0.22, 1) 1s;
	color: #000;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: bold;
	font-size: 16px;

	&::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 0;
		height: 2px;
		background-color: #111;
		transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	&:hover::after {
		width: 100%;
		left: 0%;
	}
}
</style>

滚动

<template>
	<div class="container">
		<button class="btn">
			<div class="hidden">
				<div class="btn--default">
					<i class="ri-send-plane-fill icon"></i>
					<span>button</span>
				</div>
				<div class="btn--result">
					<i class="ri-send-plane-fill icon"></i>
					<span>button</span>
				</div>
			</div>
		</button>
	</div>
</template>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

button {
	width: 140px;
	height: 60px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	outline: none;
	border: none;
	transition-duration: 1s;
	font-size: 16px;
	letter-spacing: 1px;
	position: relative;
	overflow: hidden;
	padding: 0;
	text-transform: uppercase;
}
.btn {
	background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}
.btn .icon {
	transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn .btn--default,
.btn .btn--result {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	inset: 0;
	transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn .btn--result {
	transform: translate(0, 100%);
}
.btn:hover .btn--default {
	transform: translateY(-100%);
}
.btn:hover .btn--result {
	transform: translateY(0);
}
.btn:hover .btn--result .icon {
	transform: rotate(45deg);
}
</style>

下载成功

<template>
	<div class="container">
		<button class="btn">
			<div class="hidden">
				<div class="default">
					<i class="ri-download-cloud-2-line icon"></i>
					<span>BUTTON</span>
				</div>
				<div class="result">
					<i class="ri-user-4-line icon"></i>
					<span>SUCCESS</span>
				</div>
			</div>
		</button>
	</div>
</template>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

button {
	width: 140px;
	height: 60px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	outline: none;
	border: none;
	transition-duration: 1s;
	font-size: 16px;
	letter-spacing: 1px;
	position: relative;
	overflow: hidden;
	padding: 0;
	text-transform: uppercase;
}

.btn .default,
.btn .result {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	inset: 0;
	transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn .result {
	transform: translate(0, 100%);
}
.btn:focus .default {
	transform: translateY(-100%);
	transition-delay: 1.2s;
}
.btn:focus .result {
	transform: translateY(0);
	color: green;
	font-weight: 700;
	transition-delay: 1.2s;
}
.btn:focus .result .icon {
	transform: rotate(45deg);
	transition-delay: 1.2s;
}
.btn::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 4px;
	border-radius: 10px;
	background-color: #8ec5fc;
	transition: width 2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn:focus:after {
	width: 100%;
}
</style>

下载进度

<template>
	<div class="container">
		<button class="btn"></button>
	</div>
</template>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

button {
	width: 140px;
	height: 60px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	outline: none;
	border: none;
	transition-duration: 1s;
	font-size: 16px;
	letter-spacing: 1px;
	position: relative;
	overflow: hidden;
	padding: 0;
	text-transform: uppercase;
}

.btn::before {
	content: "DOWN";
	display: block;
	z-index: 10;
}
.btn::after {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	left: 0;
	width: 0;
	border-radius: 10px;
	background-image: linear-gradient(to left, #9890e3 0%, #b1f4cf 100%);
}
.btn:focus::before {
	animation: btn6_text 3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.btn:focus::after {
	animation: btn6 3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@keyframes btn6_text {
	0%,
	90% {
		content: "DOWN";
	}

	100% {
		content: "SUCCESS";
	}
}
@keyframes btn6 {
	0% {
		width: 0;
	}
	20% {
		width: 20%;
	}
	40%,
	50% {
		width: 50%;
	}
	51% {
		width: 51%;
	}
	52% {
		width: 52%;
	}
	53% {
		width: 53%;
	}
	54% {
		width: 54%;
	}
	79% {
		width: 70%;
	}
	100% {
		width: 100%;
	}
}
</style>

购物结算

<template>
	<div class="container">
		<button class="btn" data-text="结算金额: $100.00">
			<div class="hidden">
				<div class="default">BUY NOW</div>
				<div class="result">
					<i class="ri-shopping-cart-2-line"></i>
				</div>
			</div>
		</button>
	</div>
</template>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
}

button {
	width: 140px;
	height: 60px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	outline: none;
	border: none;
	transition-duration: 1s;
	font-size: 16px;
	letter-spacing: 1px;
	position: relative;
	overflow: hidden;
	padding: 0;
	text-transform: uppercase;
}

.hidden {
	overflow: hidden;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
}

.btn {
	--gap: 18px;
	overflow: initial;
	color: #dcd9d4;
	background-color: #1e1e1e;
	box-shadow: 0 0 10px #3b3b3b, inset 0 0 10px rgb(158, 155, 155);
}

.btn::before,
.btn::after {
	opacity: 0;
	visibility: hidden;
	transition: bottom 0.4s;
}
.btn::before {
	content: attr(data-text);
	display: block;
	position: absolute;
	bottom: calc(100% + var(--gap) + 10px);
	padding: 8px 10px;
	border-radius: 5px;
	background-color: #555;
	color: #fff;
	font-size: 12px;
}
.btn::after {
	content: "";
	position: absolute;
	bottom: calc(100% + var(--gap) - 10px);
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top-color: #555;
}
.btn .default,
.btn .result {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	inset: 0;
	transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn .result {
	transform: translate(0, 100%);
}
.btn:hover .default {
	transform: translateY(-100%);
}
.btn:hover .result {
	font-size: 30px;
	transform: translateY(0);
}
.btn:hover::before,
.btn:hover::after {
	opacity: 1;
	visibility: visible;
}
.btn:hover::before {
	bottom: calc(100% + var(--gap));
}
.btn:hover::after {
	bottom: calc(100% + var(--gap) - 20px);
}
</style>

文字偏移

<template>
	<div class="container">
		<button class="btn">
			<span>B</span>
			<span>a</span>
			<span>c</span>
			<span>k</span>
			<span>T</span>
			<span>o</span>
			<span>p</span>
		</button>
	</div>
</template>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

button {
	width: 140px;
	height: 60px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	outline: none;
	border: none;
	transition-duration: 1s;
	font-size: 16px;
	letter-spacing: 1px;
	position: relative;
	overflow: hidden;
	padding: 0;
	text-transform: uppercase;
}

.btn {
	letter-spacing: 6px;
	background-color: #1e1e1e;
	color: #dcd9d4;
	box-shadow: 0 0 10px #3b3b3b, inset 0 0 10px rgb(158, 155, 155);
}
.btn span {
	transform: translateY(40%);
	transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn:hover span {
	transform: translateY(-10%) scale(1.2);
}
.btn:hover span:nth-child(1) {
	transition-delay: 0.15s;
}
.btn:hover span:nth-child(2) {
	transition-delay: 0.2s;
}
.btn:hover span:nth-child(3) {
	transition-delay: 0.35s;
}
.btn:hover span:nth-child(4) {
	transition-delay: 0.4s;
}
.btn:hover span:nth-child(5) {
	transition-delay: 0.55s;
}
.btn:hover span:nth-child(6) {
	transition-delay: 0.6s;
}
.btn:hover span:nth-child(7) {
	transition-delay: 0.65s;
}
</style>

炫彩边框

<template>
	<div class="container">
		<button>button</button>
	</div>
</template>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

button {
	width: 140px;
	height: 60px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	outline: none;
	border: none;
	transition-duration: 1s;
	font-size: 16px;
	letter-spacing: 1px;
	position: relative;
	overflow: hidden;
	padding: 0;
	text-transform: uppercase;
	z-index: 0;
	color: #8ec5fc;
}

button::before {
	content: "";
	position: absolute;
	width: 400px;
	height: 400px;

	background: conic-gradient(transparent, #330867, transparent 40%);
	z-index: -2;
	animation: rote 3s infinite linear;
}

button::after {
	content: "";
	position: absolute;
	inset: 2px;
	background-color: #020420;
	z-index: -1;
	border-radius: 6px;
}

@keyframes rote {
	100% {
		transform: rotate(360deg);
	}
}
</style>

边框渐变

<template>
	<div class="container">
		<button>button</button>
	</div>
</template>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

button {
	width: 140px;
	height: 60px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	outline: none;
	border: none;
	transition-duration: 1s;
	font-size: 16px;
	letter-spacing: 1px;
	position: relative;
	overflow: hidden;
	padding: 0;
	text-transform: uppercase;
	z-index: 0;
	color: #8ec5fc;
}

button::before {
	content: "";
	position: absolute;
	width: 400px;
	height: 400px;
	background-image: linear-gradient(to top, #eea2a2 10%, #7ac5d8 100%);
	z-index: -2;
	animation: rote 3s infinite linear;
}

button::after {
	content: "";
	position: absolute;
	inset: 2px;
	background-color: #020420;
	z-index: -1;
	border-radius: 6px;
}

@keyframes rote {
	100% {
		transform: rotate(360deg);
	}
}
</style>