Million_Air님 <주의>
본문 내용은 추천, 비추천 버튼을 예시로 제작 되었습니다.
다른 버튼이나 모든 버튼에 적용시킬 경우 조금의 수정이 필요합니다.
/* 색 설정 */
html { --btcolor: #888; }
html.darkmode { --btcolor: #AAA; }
/* display 설정 */
#article-content-wrapper>.vote-area {
display: flex;
align-items: center;
justify-content: center;
}
/* 버튼 설정 */
#article-content-wrapper>.vote-area>button { margin: 0 3px; position: relative; }
#article-content-wrapper>.vote-area>button:active { transform: scale(0.92); }
#article-content-wrapper>.vote-area>button:before,
#article-content-wrapper>.vote-area>button:after {
content: "";
display: block;
left: -30%;
position: absolute;
width: 160%;
height: 80%;
background-repeat: no-repeat;
pointer-events: none;
}
#article-content-wrapper>.vote-area>button:active::before {
top: -60%;
background-image: radial-gradient(circle, var(--btcolor) 20%, transparent 20%),
radial-gradient(circle, transparent 20%, var(--btcolor) 20%, transparent 30%),
radial-gradient(circle, var(--btcolor) 20%, transparent 20%),
radial-gradient(circle, var(--btcolor) 20%, transparent 20%),
radial-gradient(circle, transparent 10%, var(--btcolor) 15%, transparent 20%),
radial-gradient(circle, var(--btcolor) 20%, transparent 20%),
radial-gradient(circle, var(--btcolor) 20%, transparent 20%),
radial-gradient(circle, var(--btcolor) 20%, transparent 20%),
radial-gradient(circle, var(--btcolor) 20%, transparent 20%);
background-size: 20% 20%, 30% 30%, 22% 22%, 28% 28%, 32% 32%, 20% 20%, 18% 18%, 15% 15%, 24% 24%;
animation: topBubbles ease-in-out 0.6s forwards infinite;
}
@keyframes topBubbles {
0% { background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%; }
50% { background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%; }
100% { background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
}
#article-content-wrapper>.vote-area>button:active::after {
bottom: -60%;
background-image: radial-gradient(circle, var(--btcolor) 20%, transparent 20%),
radial-gradient(circle, var(--btcolor) 20%, transparent 20%),
radial-gradient(circle, transparent 10%, var(--btcolor) 15%, transparent 20%),
radial-gradient(circle, var(--btcolor) 20%, transparent 20%),
radial-gradient(circle, var(--btcolor) 20%, transparent 20%),
radial-gradient(circle, var(--btcolor) 20%, transparent 20%),
radial-gradient(circle, var(--btcolor) 20%, transparent 20%);
background-size: 22% 22%, 30% 30%, 32% 32%, 36% 36%, 22% 22%, 24% 24%, 30% 30%;
animation: bottomBubbles ease-in-out 0.6s forwards infinite;
}
@keyframes bottomBubbles {
0% { background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%; }
50% { background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%; }
100% { background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
}
출처 : https://www.codingnepalweb.com/button-click-animation-html-css-javascript/
radial-gradient: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient
