Html： 按钮效果 Css: *{ margin: 0; padding: 0;}body{ height: 100vh; display: flex; justify-content: center; align-items: center;}.login{ position: relative; border: none; outline: none; width: 12rem; height: 5rem; border-radius: 5rem; background: linear-gradient(to right top, #0655ff, #2907ec); color: white; font-weight: bold; font-size: 1.5rem; box-shadow: 0 8px 28px rgba(33, 33, 33, 0.212); cursor: pointer; transition: .5s;}.active.login { width: 5rem; color: transparent;}.loading { opacity: 0; transition: .5s;}.active .loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 70%; height: 40%; display: flex; justify-content: space-around; align-items: flex-end; opacity: 1;}.active .loading div{ width: .3rem; height: .3rem; border-radius: 50%; background-color: #fff; animation: .9s loading ease-in-out infinite alternate;}@keyframes loading { to { transform: translate(0, -1rem); }}.active .loading div:nth-child(2){ animation-delay: .2s;}.active .loading div:nth-child(3){ animation-delay: .4s;}.verity .loading{ opacity: 0;}.checkmark{ position: absolute; left: 50%; top: 56%; transform: translate(-50%,-50%); stroke-dasharray: 36px; stroke-dashoffset: 36px;}.verity .checkmark{ animation: .6s show forwards; animation-delay: .4s;}@keyframes show { to{ stroke-dashoffset: 0; }}