【前端开发】一些精美的按钮设计（CSS+HTML）

.button {

	 margin: 0;

	 height: auto;

 	background: transparent;

	 padding: 0;

	 border: none;

	 cursor: pointer;

}



.button {

	 --border-right: 6px;

	 --text-stroke-color: rgba(255,255,255,0.6);

	 --animation-color: #37FF8B;

	 --fs-size: 2em;

	 letter-spacing: 3px;

	 text-decoration: none;

 	font-size: var(--fs-size);

	 font-family: "Arial";

	 position: relative;

	 text-transform: uppercase;

	 color: transparent;

	 -webkit-text-stroke: 1px var(--text-stroke-color);

}

.hover-text {

	 position: absolute;

	 box-sizing: border-box;

 	content: attr(data-text);

	 color: var(--animation-color);

	 width: 0%;

	 inset: 0;

	 border-right: var(--border-right) solid var(--animation-color);

	 overflow: hidden;

	 transition: 0.5s;

	 -webkit-text-stroke: 1px var(--animation-color);

}

.button:hover .hover-text {

	 width: 100%;

	 filter: drop-shadow(0 0 23px var(--animation-color))

} 

.btn-donate {

	 --clr-font-main: hsla(0 0% 20% / 100);

	 --btn-bg-1: hsla(194 100% 69% / 1);

	 --btn-bg-2: hsla(217 100% 56% / 1);

	 --btn-bg-color: hsla(360 100% 100% / 1);

	 --radii: 0.5em;

	 cursor: pointer;

	 padding: 0.9em 1.4em;

	 min-width: 120px;

	 min-height: 44px;

	 font-size: var(--size, 1rem);

	 font-family: "Segoe UI", system-ui, sans-serif;

	 font-weight: 500;

	 transition: 0.8s;

	 background-size: 280% auto;

	 background-image: linear-gradient(325deg, var(--btn-bg-2) 0%, var(--btn-bg-1) 55%, var(--btn-bg-2) 90%);

	 border: none;

	 border-radius: var(--radii);

	 color: var(--btn-bg-color);

	 box-shadow: 0px 0px 20px rgba(71, 184, 255, 0.5), 0px 5px 5px -1px rgba(58, 125, 233, 0.25), inset 4px 4px 8px rgba(175, 230, 255, 0.5), inset -4px -4px 8px rgba(19, 95, 216, 0.35);

}

.btn-donate:hover {

	 background-position: right top;

}

.btn-donate:is(:focus, :focus-visible, :active) {

 	outline: none;

 	box-shadow: 0 0 0 3px var(--btn-bg-color), 0 0 0 6px var(--btn-bg-2);

}

@media (prefers-reduced-motion: reduce) {

 	.btn-donate {

 		 transition: linear;

	 }

} 

.animated-button {

	 position: relative;

 	display: flex;

	 align-items: center;

 	gap: 4px;

 	padding: 16px 36px;

 	border: 4px solid;

 	border-color: transparent;

 	font-size: 16px;

 	background-color: inherit;

 	border-radius: 100px;

 	font-weight: 600;

 	color: greenyellow;

	 box-shadow: 0 0 0 2px greenyellow;

	 cursor: pointer;

	 overflow: hidden;

	 transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);

}

.animated-button svg {

	 position: absolute;

	 width: 24px;

	 fill: greenyellow;

	 z-index: 9;

	 transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);

}

.animated-button .arr-1 {

 	right: 16px;

}

.animated-button .arr-2 {

	 left: -25%;

}



.animated-button .circle {

	 position: absolute;

	 top: 50%;

	 left: 50%;

	 transform: translate(-50%, -50%);

	 width: 20px;

	 height: 20px;

	 background-color: greenyellow;

	 border-radius: 50%;

	 opacity: 0;

	 transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);

}

.animated-button .text {

	 position: relative;

	 z-index: 1;

	 transform: translateX(-12px);

	 transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);

}

.animated-button:hover {

	 box-shadow: 0 0 0 12px transparent;

	 color: #212121;

	 border-radius: 12px;

}

.animated-button:hover .arr-1 {

	 right: -25%;

}

.animated-button:hover .arr-2 {

	 left: 16px;

}

.animated-button:hover .text {

 	transform: translateX(12px);

}

.animated-button:hover svg {

	 fill: #212121;

}

.animated-button:active {

	 scale: 0.95;

	 box-shadow: 0 0 0 4px greenyellow;

}

.animated-button:hover .circle {

	 width: 220px;

	 height: 220px;

 	opacity: 1;

} 

.sparkle-button {

 --active: 0;

 --bg: radial-gradient(

			40% 50% at center 100%,

			hsl(270 calc(var(--active) * 97%) 72% / var(--active)),

			transparent

		),

		radial-gradient(

			80% 100% at center 120%,

			hsl(260 calc(var(--active) * 97%) 70% / var(--active)),

			transparent

		),

		hsl(260 calc(var(--active) * 97%) calc((var(--active) * 44%) + 12%));

 background: var(--bg);

 font-size: 1.2rem;

 font-weight: 500;

 border: 0;

 cursor: pointer;

 padding: 1em 1em;

 display: flex;

 align-items: center;

 gap: 0.25em;

 white-space: nowrap;

 border-radius: 100px;

 position: relative;

 box-shadow: 0 0 calc(var(--active) * 3em) calc(var(--active) * 1em) hsl(260 97% 61% / 0.75),

		0 0em 0 0 hsl(260 calc(var(--active) * 97%) calc((var(--active) * 50%) + 30%)) inset,

		0 -0.05em 0 0 hsl(260 calc(var(--active) * 97%) calc(var(--active) * 60%)) inset;

 transition: box-shadow var(--transition), scale var(--transition), background var(--transition);

 scale: calc(1 + (var(--active) * 0.1));

 transition: .3s;

}



.sparkle-button:active {

 scale: 1;

 transition: .3s;

}



.sparkle path {

 color: hsl(0 0% calc((var(--active, 0) * 70%) + var(--base)));

 transform-box: fill-box;

 transform-origin: center;

 fill: currentColor;

 stroke: currentColor;

 animation-delay: calc((var(--transition) * 1.5) + (var(--delay) * 1s));

 animation-duration: 0.6s;

 transition: color var(--transition);

}



.sparkle-button:is(:hover, :focus-visible) path {

 animation-name: bounce;

}



@keyframes bounce {

 35%, 65% {

  scale: var(--scale);

 }

}



.sparkle path:nth-of-type(1) {

 --scale: 0.5;

 --delay: 0.1;

 --base: 40%;

}



.sparkle path:nth-of-type(2) {

 --scale: 1.5;

 --delay: 0.2;

 --base: 20%;

}



.sparkle path:nth-of-type(3) {

 --scale: 2.5;

 --delay: 0.35;

 --base: 30%;

}



.sparkle-button:before {

 content: "";

 position: absolute;

 inset: -0.2em;

 z-index: -1;

 border: 0.25em solid hsl(260 97% 50% / 0.5);

 border-radius: 100px;

 opacity: var(--active, 0);

 transition: opacity var(--transition);

}



.spark {

 position: absolute;

 inset: 0;

 border-radius: 100px;

 rotate: 0deg;

 overflow: hidden;

 mask: linear-gradient(white, transparent 50%);

 animation: flip calc(var(--spark) * 2) infinite steps(2, end);

}



@keyframes flip {

 to {

  rotate: 360deg;

 }

}



.spark:before {

 content: "";

 position: absolute;

 width: 200%;

 aspect-ratio: 1;

 top: 0%;

 left: 50%;

 z-index: -1;

 translate: -50% -15%;

 rotate: 0;

 transform: rotate(-90deg);

 opacity: calc((var(--active)) + 0.4);

 background: conic-gradient(

		from 0deg,

		transparent 0 340deg,

		white 360deg

	);

 transition: opacity var(--transition);

 animation: rotate var(--spark) linear infinite both;

}



.spark:after {

 content: "";

 position: absolute;

 inset: var(--cut);

 border-radius: 100px;

}



.backdrop {

 position: absolute;

 inset: var(--cut);

 background: var(--bg);

 border-radius: 100px;

 transition: background var(--transition);

}



@keyframes rotate {

 to {

  transform: rotate(90deg);

 }

}



@supports(selector(:has(:is(+ *)))) {

 body:has(button:is(:hover, :focus-visible)) {

  --active: 1;

  --play-state: running;

 }



 .bodydrop {

  display: none;

 }

}



.sparkle-button:is(:hover, :focus-visible) ~ :is(.bodydrop, .particle-pen) {

 --active: 1;

 --play-state: runnin;

}



.sparkle-button:is(:hover, :focus-visible) {

 --active: 1;

 --play-state: running;

}



.sp {

 position: relative;

}



.particle-pen {

 position: absolute;

 width: 200%;

 aspect-ratio: 1;

 top: 50%;

 left: 50%;

 translate: -50% -50%;

 -webkit-mask: radial-gradient(white, transparent 65%);

 z-index: -1;

 opacity: var(--active, 0);

 transition: opacity var(--transition);

}



.particle {

 fill: white;

 width: calc(var(--size, 0.25) * 1rem);

 aspect-ratio: 1;

 position: absolute;

 top: calc(var(--y) * 1%);

 left: calc(var(--x) * 1%);

 opacity: var(--alpha, 1);

 animation: float-out calc(var(--duration, 1) * 1s) calc(var(--delay) * -1s) infinite linear;

 transform-origin: var(--origin-x, 1000%) var(--origin-y, 1000%);

 z-index: -1;

 animation-play-state: var(--play-state, paused);

}



.particle path {

 fill: hsl(0 0% 90%);

 stroke: none;

}



.particle:nth-of-type(even) {

 animation-direction: reverse;

}



@keyframes float-out {

 to {

  rotate: 360deg;

 }

}



.text {

 translate: 2% -6%;

 letter-spacing: 0.01ch;

 background: linear-gradient(90deg, hsl(0 0% calc((var(--active) * 100%) + 65%)), hsl(0 0% calc((var(--active) * 100%) + 26%)));

 -webkit-background-clip: text;

 color: transparent;

 transition: background var(--transition);

}



.sparkle-button svg {

 inline-size: 1.25em;

 translate: -25% -5%;

}

.button {

 position: relative;

 width: 120px;

 height: 40px;

 background-color: #000;

 display: flex;

 align-items: center;

 color: white;

 flex-direction: column;

 justify-content: center;

 border: none;

 padding: 12px;

 gap: 12px;

 border-radius: 8px;

 cursor: pointer;

}



.button::before {

 content: '';

 position: absolute;

 inset: 0;

 left: -4px;

 top: -1px;

 margin: auto;

 width: 128px;

 height: 48px;

 border-radius: 10px;

 background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100% );

 z-index: -10;

 pointer-events: none;

 transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}



.button::after {

 content: "";

 z-index: -1;

 position: absolute;

 inset: 0;

 background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% );

 transform: translate3d(0, 0, 0) scale(0.95);

 filter: blur(20px);

}



.button:hover::after {

 filter: blur(30px);

}



.button:hover::before {

 transform: rotate(-180deg);

}



.button:active::before {

 scale: 0.7;

}

.btn {

 display: flex;

 justify-content: center;

 align-items: center;

 width: 13rem;

 overflow: hidden;

 height: 3rem;

 background-size: 300% 300%;

 backdrop-filter: blur(1rem);

 border-radius: 5rem;

 transition: 0.5s;

 animation: gradient_301 5s ease infinite;

 border: double 4px transparent;

 background-image: linear-gradient(#212121, #212121), linear-gradient(137.48deg, #ffdb3b 10%,#FE53BB 45%, #8F51EA 67%, #0044ff 87%);

 background-origin: border-box;

 background-clip: content-box, border-box;

}



#container-stars {

 position: absolute;

 z-index: -1;

 width: 100%;

 height: 100%;

 overflow: hidden;

 transition: 0.5s;

 backdrop-filter: blur(1rem);

 border-radius: 5rem;

}



strong {

 z-index: 2;

 font-family: 'Avalors Personal Use';

 font-size: 12px;

 letter-spacing: 5px;

 color: #FFFFFF;

 text-shadow: 0 0 4px white;

}



#glow {

 position: absolute;

 display: flex;

 width: 12rem;

}



.circle {

 width: 100%;

 height: 30px;

 filter: blur(2rem);

 animation: pulse_3011 4s infinite;

 z-index: -1;

}



.circle:nth-of-type(1) {

 background: rgba(254, 83, 186, 0.636);

}



.circle:nth-of-type(2) {

 background: rgba(142, 81, 234, 0.704);

}



.btn:hover #container-stars {

 z-index: 1;

 background-color: #212121;

}



.btn:hover {

 transform: scale(1.1)

}



.btn:active {

 border: double 4px #FE53BB;

 background-origin: border-box;

 background-clip: content-box, border-box;

 animation: none;

}



.btn:active .circle {

 background: #FE53BB;

}



#stars {

 position: relative;

 background: transparent;

 width: 200rem;

 height: 200rem;

}



#stars::after {

 content: "";

 position: absolute;

 top: -10rem;

 left: -100rem;

 width: 100%;

 height: 100%;

 animation: animStarRotate 90s linear infinite;

}



#stars::after {

 background-image: radial-gradient(#ffffff 1px, transparent 1%);

 background-size: 50px 50px;

}



#stars::before {

 content: "";

 position: absolute;

 top: 0;

 left: -50%;

 width: 170%;

 height: 500%;

 animation: animStar 60s linear infinite;

}



#stars::before {

 background-image: radial-gradient(#ffffff 1px, transparent 1%);

 background-size: 50px 50px;

 opacity: 0.5;

}



@keyframes animStar {

 from {

  transform: translateY(0);

 }



 to {

  transform: translateY(-135rem);

 }

}



@keyframes animStarRotate {

 from {

  transform: rotate(360deg);

 }



 to {

  transform: rotate(0);

 }

}



@keyframes gradient_301 {

 0% {

  background-position: 0% 50%;

 }



 50% {

  background-position: 100% 50%;

 }



 100% {

  background-position: 0% 50%;

 }

}



@keyframes pulse_3011 {

 0% {

  transform: scale(0.75);

  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);

 }



 70% {

  transform: scale(1);

  box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);

 }



 100% {

  transform: scale(0.75);

  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);

 }

}

.Btn {

 display: flex;

 align-items: center;

 justify-content: flex-start;

 width: 45px;

 height: 45px;

 border: none;

 border-radius: 50%;

 cursor: pointer;

 position: relative;

 overflow: hidden;

 transition-duration: .3s;

 box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);

 background-color: rgb(255, 65, 65);

}



.sign {

 width: 100%;

 transition-duration: .3s;

 display: flex;

 align-items: center;

 justify-content: center;

}



.sign svg {

 width: 17px;

}



.sign svg path {

 fill: white;

}

/* text */

.text {

 position: absolute;

 right: 0%;

 width: 0%;

 opacity: 0;

 color: white;

 font-size: 1.2em;

 font-weight: 600;

 transition-duration: .3s;

}

/* hover effect on button width */

.Btn:hover {

 width: 125px;

 border-radius: 40px;

 transition-duration: .3s;

}



.Btn:hover .sign {

 width: 30%;

 transition-duration: .3s;

 padding-left: 20px;

}

/* hover effect button's text */

.Btn:hover .text {

 opacity: 1;

 width: 70%;

 transition-duration: .3s;

 padding-right: 10px;

}

/* button click effect*/

.Btn:active {

 transform: translate(2px ,2px);

.btn {

 font-size: 1.2rem;

 padding: 1rem 2.5rem;

 border: none;

 outline: none;

 border-radius: 0.4rem;

 cursor: pointer;

 text-transform: uppercase;

 background-color: rgb(14, 14, 26);

 color: rgb(234, 234, 234);

 font-weight: 700;

 transition: 0.6s;

 box-shadow: 0px 0px 60px #1f4c65;

 -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));

}



.btn:active {

 scale: 0.92;

}



.btn:hover {

 background: rgb(2,29,78);

 background: linear-gradient(270deg, rgba(2, 29, 78, 0.681) 0%, rgba(31, 215, 232, 0.873) 60%);

 color: rgb(4, 4, 38);

}

.button {

 position: relative;

 font-size: 24px;

 font-weight: 600;

 padding: 15px 30px;

 color: #cfef00;

 background-color: transparent;

 border: 2px solid #cfef00;

 border-radius: 10px;

 cursor: pointer;

 transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);

 overflow: hidden;

}



.button::before {

 content: '';

 position: absolute;

 width: 100%;

 height: 100%;

 background: #cfef00;

 top: 0%;

 left: -100%;

 scale: 1;

 border-radius: inherit;

 transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);

}



.button span {

 transition: all 0.7s;

 position: relative;

 overflow: hidden;

}



.button span::before {

 position: absolute;

 content: 'CLICK';

 top: 0;

 left: 0;

 color: #212121;

 width: 0;

 overflow: hidden;

}



.button:hover span::before {

 width: 100%;

 transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);

 transition-delay: 0.4s;

}



.button:hover::before {

 scale: 1;

 top: 0%;

 left: 0%;

}



.button:hover {

 border-color: transparent;

}



.button:active {

 scale: 0.9;

}

.button {

 position: absolute;

 top: 50%;

 left: 50%;

 transform: translate(-50%, -50%)

}



.button a {

 display: block;

 height: 50px;

 width: 200px;

 background: #00b7ea;

 color: white;

 font: 17px/50px Helvetica, Verdana, sans-serif;

 text-decoration: none;

 text-align: center;

 text-transform: uppercase;

 -webkit-border-radius: 10px;

 -moz-border-radius: 10px;

 border-radius: 10px;

 -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

 -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

 box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

 background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%);

 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3));

 background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%);

 background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%);

 background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%);

 background: linear-gradient(top, #00b7ea 0%,#009ec3 100%);

 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );

}



b {

 background: #222;

 display: block;

 height: 40px;

 width: 180px;

 margin: -50px 0 0 10px;

 text-align: center;

 font: 12px/45px Helvetica, Verdana, sans-serif;

 color: #fff;

 position: absolute;

 z-index: -1;

 -webkit-border-radius: 5px;

 -moz-border-radius: 5px;

 border-radius: 5px;

 -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

 -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

 box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

 -webkit-transition: all 0.5s ease;

 -moz-transition: all 0.5s ease;

 -o-transition: all 0.5s ease;

 -ms-transition: all 0.5s ease;

 transition: all 0.5s ease;

}



.button a, b {

 -webkit-border-radius: 10px;

 -moz-border-radius: 10px;

 border-radius: 10px;

 -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

 -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

 box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

}



.button:hover .top {

 margin: -80px 0 0 10px;

 line-height: 35px;

}



.button:hover .bottom {

 margin: -10px 0 0 10px;

}



.button a:active {

 background: #00b7ea;

 background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%);

 background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3));

 background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%);

 background: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%);

 background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%);

 background: linear-gradient(top, #00b7ea 36%,#009ec3 100%);

 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );

}



.button:active .bottom {

 margin: -20px 0 0 10px;

}



.button:active .top {

 margin: -70px 0 0 10px;

}

.button {

 font-size: 1rem;

 background-color: #F2E1C1 !important;

 transform: translateY(-0.10em);

 box-shadow: 3px 3px 0px rgba(55, 22, 22, 0.67);

 border: 1px solid rgba(55, 22, 22, 0.67);

 border-radius: 50px;

 padding: 0.75em 1.5em;

 transition: 0.2s;

 cursor: pointer;

}



button:hover {

 box-shadow: 4px 6px 0px rgba(55, 22, 22, 0.67);

 transform: translateY(-0.4em);

}



button:active {

 box-shadow: none;

 transform: translateY(0);

}