返回组件库
按钮
组件库
AI Design
紫色立体按钮
CSS
01.button {02 --white: #ffe7ff;03 --purple-100: #f4b1fd;04 --purple-200: #d190ff;05 --purple-300: #c389f2;06 --purple-400: #8e26e2;07 --purple-500: #5e2b83;08 --radius: 18px;09 10 border-radius: var(--radius);11 outline: none;12 cursor: pointer;13 font-size: 23px;14 font-family: Arial;15 background: transparent;16 letter-spacing: -1px;17 border: 0;18 position: relative;19 width: 220px;20 height: 80px;21 transform: rotate(353deg) skewX(4deg);22}23 24.bg {25 position: absolute;26 inset: 0;27 border-radius: inherit;28 filter: blur(1px);29}30.bg::before,31.bg::after {32 content: "";33 position: absolute;34 inset: 0;35 border-radius: calc(var(--radius) * 1.1);36 background: var(--purple-500);37}38.bg::before {39 filter: blur(5px);40 transition: all 0.3s ease;41 box-shadow:42 -7px 6px 0 0 rgb(115 75 155 / 40%),43 -14px 12px 0 0 rgb(115 75 155 / 30%),44 -21px 18px 4px 0 rgb(115 75 155 / 25%),45 -28px 24px 8px 0 rgb(115 75 155 / 15%),46 -35px 30px 12px 0 rgb(115 75 155 / 12%),47 -42px 36px 16px 0 rgb(115 75 155 / 8%),48 -56px 42px 20px 0 rgb(115 75 155 / 5%);49}50 51.wrap {52 border-radius: inherit;53 overflow: hidden;54 height: 100%;55 transform: translate(6px, -6px);56 padding: 3px;57 background: linear-gradient(58 to bottom,59 var(--purple-100) 0%,60 var(--purple-400) 100%61 );62 position: relative;63 transition: all 0.3s ease;64}65 66.outline {67 position: absolute;68 overflow: hidden;69 inset: 0;70 opacity: 0;71 outline: none;72 border-radius: inherit;73 transition: all 0.4s ease;74}75.outline::before {76 content: "";77 position: absolute;78 inset: 2px;79 width: 120px;80 height: 300px;81 margin: auto;82 background: linear-gradient(83 to right,84 transparent 0%,85 white 50%,86 transparent 100%87 );88 animation: spin 3s linear infinite;89 animation-play-state: paused;90}91 92.content {93 pointer-events: none;94 display: flex;95 align-items: center;96 justify-content: center;97 z-index: 1;98 position: relative;99 height: 100%;100 gap: 16px;101 border-radius: calc(var(--radius) * 0.85);102 font-weight: 600;103 transition: all 0.3s ease;104 background: linear-gradient(105 to bottom,106 var(--purple-300) 0%,107 var(--purple-400) 100%108 );109 box-shadow:110 inset -2px 12px 11px -5px var(--purple-200),111 inset 1px -3px 11px 0px rgb(0 0 0 / 35%);112}113.content::before {114 content: "";115 inset: 0;116 position: absolute;117 z-index: 10;118 width: 80%;119 top: 45%;120 bottom: 35%;121 opacity: 0.7;122 margin: auto;123 background: linear-gradient(to bottom, transparent, var(--purple-400));124 filter: brightness(1.3) blur(5px);125}126 127.char {128 transition: all 0.3s ease;129 display: flex;130 align-items: center;131 justify-content: center;132}133.char span {134 display: block;135 color: transparent;136 position: relative;137}138.char span:nth-child(5) {139 margin-left: 5px;140}141.char.state-1 span:nth-child(5) {142 margin-right: -3px;143}144.char.state-1 span {145 animation: charAppear 1.2s ease backwards calc(var(--i) * 0.03s);146}147.char.state-1 span::before,148.char span::after {149 content: attr(data-label);150 position: absolute;151 color: var(--white);152 text-shadow: -1px 1px 2px var(--purple-500);153 left: 0;154}155.char span::before {156 opacity: 0;157 transform: translateY(-100%);158}159.char.state-2 {160 position: absolute;161 left: 80px;162}163.char.state-2 span::after {164 opacity: 1;165}166 167.icon {168 animation: resetArrow 0.8s cubic-bezier(0.7, -0.5, 0.3, 1.2) forwards;169 z-index: 10;170}171.icon div,172.icon div::before,173.icon div::after {174 height: 3px;175 border-radius: 1px;176 background-color: var(--white);177}178.icon div::before,179.icon div::after {180 content: "";181 position: absolute;182 right: 0;183 transform-origin: center right;184 width: 14px;185 border-radius: 15px;186 transition: all 0.3s ease;187}188.icon div {189 position: relative;190 width: 24px;191 box-shadow: -2px 2px 5px var(--purple-400);192 transform: scale(0.9);193 background: linear-gradient(to bottom, var(--white), var(--purple-100));194 animation: swingArrow 1s ease-in-out infinite;195 animation-play-state: paused;196}197.icon div::before {198 transform: rotate(44deg);199 top: 1px;200 box-shadow: 1px -2px 3px -1px var(--purple-400);201 animation: rotateArrowLine 1s linear infinite;202 animation-play-state: paused;203}204.icon div::after {205 bottom: 1px;206 transform: rotate(316deg);207 box-shadow: -2px 2px 3px 0 var(--purple-400);208 background: linear-gradient(200deg, var(--white), var(--purple-100));209 animation: rotateArrowLine2 1s linear infinite;210 animation-play-state: paused;211}212 213.path {214 position: absolute;215 z-index: 12;216 bottom: 0;217 left: 0;218 right: 0;219 stroke-dasharray: 150 480;220 stroke-dashoffset: 150;221 pointer-events: none;222}223 224.splash {225 position: absolute;226 top: 0;227 left: 0;228 pointer-events: none;229 stroke-dasharray: 60 60;230 stroke-dashoffset: 60;231 transform: translate(-17%, -31%);232 stroke: var(--purple-300);233}234 235/** STATES */236 237.button:hover .words {238 opacity: 1;239}240.button:hover .words span {241 animation-play-state: running;242}243 244.button:hover .char.state-1 span::before {245 animation: charAppear 0.7s ease calc(var(--i) * 0.03s);246}247 248.button:hover .char.state-1 span::after {249 opacity: 1;250 animation: charDisappear 0.7s ease calc(var(--i) * 0.03s);251}252 253.button:hover .wrap {254 transform: translate(8px, -8px);255}256 257.button:hover .outline {258 opacity: 1;259}260 261.button:hover .outline::before,262.button:hover .icon div::before,263.button:hover .icon div::after,264.button:hover .icon div {265 animation-play-state: running;266}267 268.button:active .bg::before {269 filter: blur(5px);270 opacity: 0.7;271 box-shadow:272 -7px 6px 0 0 rgb(115 75 155 / 40%),273 -14px 12px 0 0 rgb(115 75 155 / 25%),274 -21px 18px 4px 0 rgb(115 75 155 / 15%);275}276.button:active .content {277 box-shadow:278 inset -1px 12px 8px -5px rgba(71, 0, 137, 0.4),279 inset 0px -3px 8px 0px var(--purple-200);280}281 282.button:active .words,283.button:active .outline {284 opacity: 0;285}286 287.button:active .wrap {288 transform: translate(3px, -3px);289}290 291.button:active .splash {292 animation: splash 0.8s cubic-bezier(0.3, 0, 0, 1) forwards 0.05s;293}294 295.button:focus .path {296 animation: path 1.6s ease forwards 0.2s;297}298 299.button:focus .icon {300 animation: arrow 1s cubic-bezier(0.7, -0.5, 0.3, 1.5) forwards;301}302 303.char.state-2 span::after,304.button:focus .char.state-1 span {305 animation: charDisappear 0.5s ease forwards calc(var(--i) * 0.03s);306}307 308.button:focus .char.state-2 span::after {309 animation: charAppear 1s ease backwards calc(var(--i) * 0.03s);310}311 312@keyframes spin {313 0% {314 transform: rotate(0deg);315 }316 100% {317 transform: rotate(360deg);318 }319}320 321@keyframes charAppear {322 0% {323 transform: translateY(50%);324 opacity: 0;325 filter: blur(20px);326 }327 20% {328 transform: translateY(70%);329 opacity: 1;330 }331 50% {332 transform: translateY(-15%);333 opacity: 1;334 filter: blur(0);335 }336 100% {337 transform: translateY(0);338 opacity: 1;339 }340}341 342@keyframes charDisappear {343 0% {344 transform: translateY(0);345 opacity: 1;346 }347 100% {348 transform: translateY(-70%);349 opacity: 0;350 filter: blur(3px);351 }352}353 354@keyframes arrow {355 0% {356 opacity: 1;357 }358 50% {359 transform: translateX(60px);360 opacity: 0;361 }362 51% {363 transform: translateX(-200px);364 opacity: 0;365 }366 100% {367 transform: translateX(-128px);368 opacity: 1;369 }370}371 372@keyframes swingArrow {373 50% {374 transform: translateX(5px) scale(0.9);375 }376}377 378@keyframes rotateArrowLine {379 50% {380 transform: rotate(30deg);381 }382 80% {383 transform: rotate(55deg);384 }385}386 387@keyframes rotateArrowLine2 {388 50% {389 transform: rotate(330deg);390 }391 80% {392 transform: rotate(300deg);393 }394}395 396@keyframes resetArrow {397 0% {398 transform: translateX(-128px);399 }400 100% {401 transform: translateX(0);402 }403}404 405@keyframes path {406 from {407 stroke: white;408 }409 to {410 stroke-dashoffset: -480;411 stroke: #f9c6fe;412 }413}414 415@keyframes splash {416 to {417 stroke-dasharray: 2 60;418 stroke-dashoffset: -60;419 }420}