CSS代码:
.button {
font-size: 14px;
color: #fff;
border: 0;
border-radius: 4px;
padding: 5px 20px;
height: 40px;
background: #2a80eb;
cursor: pointer;
position: relative;
}
.button.loading::before {
content: '';
width: 20px; height: 20px;
box-sizing: border-box;
border: 2px solid;
border-top-color: transparent;
border-radius: 50%;
position: absolute;
inset: 0;
margin: auto;
animation: spin 1s linear infinite;
}
.fill-color.loading {
-webkit-text-fill-color: transparent;
}
.first-line.loading::first-line {
color: transparent;
}
@keyframes spin {
from { rotate: 0deg; }
to { rotate: 360deg; }
}
HTML代码:
<h4 class="fill">-webkit-text-fill-color</h4>
<button
class="button fill-color"
onClick="this.classList.toggle('loading')"
>点击我</button>
<h4 class="fill">::first-line</h4>
<button
class="button first-line"
onClick="this.classList.toggle('loading')"
>点击我</button>