부트스트랩 저장 버튼에 반짝이는 효과를 추가하고 싶었습니다.
대부분의 검색 결과는 마우스를 올리면 빛이 나는 효과가 많은데 주로 백엔드를 다루는 저에게는 해결하기 어려웠습니다.
쉬우면서도 어려워 보이는 폰트의 세계…
결과 및 코드
펜 참조
빛나는 버튼 엘라 (@Ella_develop_floor) 에 코드펜.
'추천 관련글,
스타일을 적용하려는 버튼의 class 속성 내부 글로우 버튼 다음과 같은 클래스를 제공해야만 이 클래스에 CSS를 적용할 수 있습니다.
별도의 소스나 다운로드 패키지 설치 없이 적용 가능합니다.
.glow-button {
animation: glowing 1500ms infinite;
}
@keyframes glowing {
0% {
box-shadow: 0 0 5px #28a745;
}
50% {
box-shadow: 0 0 15px #28a745;
}
100% {
box-shadow: 0 0 5px #28a745;
}
}
@keyFrames를 사용하여 glowing 속성을 지정하고 애니메이션으로 CSS에 적용한 속성: glowing.
색상을 자유롭게 변경해보세요 🙂