返回组件库
按钮
组件库
AI Design
炫彩按钮
CSS
01.btn-wrapper {02 --rad: 32px;03 --color-wrapper-border: #fff;04 --color-btn-bg: #f00;05 --color-btn-text: #000;06 --color-btn-text-shadow: #fff;07 --color-btn-inset-shadow: #558;08 --color-layer-a: #fff;09 --color-layer-b: #00f;10 --color-overlay-text: #000;11 --color-overlay-glow: #fff;12 --color-overlay-shadow: #0004;13 --color-overlay-highlight: #fff5;14 15 position: relative;16 display: flex;17 align-items: center;18 justify-content: center;19 overflow: clip;20 overflow-clip-margin: 4px;21 22 border: 2px solid var(--color-wrapper-border);23 border-radius: var(--rad);24 25 font-family: "Inter", sans-serif;26 font-size: 1.5rem;27 font-weight: 600;28 29 filter: saturate(0.65) brightness(1.8);30}31 32.gradient-btn {33 position: relative;34 z-index: -1;35 36 padding: 12px 36px;37 border: none;38 border-radius: var(--rad);39 40 font-family: inherit;41 font-size: inherit;42 font-weight: inherit;43 letter-spacing: 0.15rem;44 45 color: var(--color-btn-text);46 background-color: var(--color-btn-bg);47 background-size: 200% 200%;48 box-shadow: inset 0 0 10px 9px var(--color-btn-inset-shadow);49 text-shadow: 0 1px 3px var(--color-btn-text-shadow);50 51 cursor: pointer;52 mix-blend-mode: color-dodge;53 transition:54 color 0.3s ease,55 text-shadow 0.3s ease;56}57 58.gradient-btn::after {59 content: "";60 position: absolute;61 pointer-events: none;62 63 left: 0;64 top: 0;65 width: 100%;66 height: 100%;67 68 border-radius: var(--rad);69 background-size: 200% 200%;70 mix-blend-mode: difference;71 z-index: 1;72}73 74.gradient-layer {75 position: absolute;76 pointer-events: none;77 78 left: -160px;79 width: 500%;80 aspect-ratio: 1;81 82 background: radial-gradient(83 ellipse at 65% 180%,84 var(--color-layer-a),85 var(--color-layer-b),86 var(--color-layer-a),87 var(--color-layer-b),88 var(--color-layer-a),89 var(--color-layer-b),90 var(--color-layer-a),91 var(--color-layer-b),92 var(--color-layer-a),93 var(--color-layer-b),94 var(--color-layer-a)95 );96 97 mix-blend-mode: difference;98 animation: rotate 8s linear infinite;99}100 101.gradient-layer:last-child {102 mix-blend-mode: color-dodge;103}104 105@keyframes rotate {106 0% {107 transform: rotate(0deg);108 }109 110 100% {111 transform: rotate(360deg);112 }113}114 115.text-overlay {116 position: absolute;117 pointer-events: none;118 z-index: 2;119 120 padding: 12px 36px;121 border-radius: var(--rad);122 123 font-family: inherit;124 font-size: inherit;125 font-weight: inherit;126 letter-spacing: 0.15rem;127 128 color: var(--color-overlay-text);129 text-shadow: 0 0 4px var(--color-overlay-glow);130 box-shadow:131 inset 0 -4px 4px 0 var(--color-overlay-shadow),132 inset 0 4px 4px 0 var(--color-overlay-highlight);133 134 mix-blend-mode: multiply;135 transition: transform 0.3s ease;136 animation: opacityPulse 5s ease infinite;137}138 139.btn-wrapper:hover {140 .text-overlay {141 transform: scale(1.1);142 }143 144 .gradient-btn {145 color: #0000;146 text-shadow: 0 0 0 #0000;147 }148}149 150.btn-wrapper:active {151 .text-overlay {152 transform: scale(0.95);153 }154 155 .gradient-btn {156 color: #0000;157 text-shadow: 0 0 0 #0000;158 }159}160 161.light {162 position: absolute;163 164 pointer-events: none;165 z-index: 1;166 border-radius: 50px;167 width: 80%;168 height: 1.9rem;169 aspect-ratio: 1;170 background-color: #fff5;171 filter: blur(5px);172 animation: pulse 3s ease-in-out infinite;173}174 175@keyframes pulse {176 0%,177 100% {178 opacity: 1;179 }180 50% {181 opacity: 0.1;182 }183}184 185@keyframes opacityPulse {186 0%,187 100% {188 opacity: 1;189 }190 50% {191 opacity: 0.5;192 }193}